@automattic/jetpack-ai-client 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.7.0] - 2024-02-19
+### Added
+- AI Client: add support for audio transcriptions. [#35691]
+- AI Client: add support for transcription post-processing. [#35734]
+
+### Changed
+- AI Client: Update voice to content feature [#35698]
+- Make build usable in projects using tsc with `moduleResolution` set to 'nodenext'. [#35453]
+- Voice to Content: Add states and refactor duration calculation [#35717]
+
+## [0.6.1] - 2024-02-13
+### Changed
+- Updated package dependencies. [#35608]
+
 ## [0.6.0] - 2024-02-05
 ### Added
 - Jetpack AI: Support floating error messaging on the AI Control component. [#35322]
@@ -206,6 +220,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[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
 [0.5.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.4.1...v0.5.0

package/build/api-fetch/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import apiFetchMod from '@wordpress/api-fetch';
+type ApiFetchType = typeof apiFetchMod.default;
+declare const apiFetch: ApiFetchType;
+export default apiFetch;

package/build/api-fetch/index.js

@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import apiFetchMod from '@wordpress/api-fetch';
+const apiFetch = (apiFetchMod.default ?? apiFetchMod);
+export default apiFetch;

package/build/ask-question/index.d.ts

@@ -1,5 +1,5 @@
-import SuggestionsEventSource from '../suggestions-event-source';
-import type { AiModelTypeProp, PromptProp } from '../types';
+import SuggestionsEventSource from '../suggestions-event-source/index.js';
+import type { AiModelTypeProp, PromptProp } from '../types.js';
 export type AskQuestionOptionsArgProps = {
     postId?: number;
     fromCache?: boolean;

package/build/ask-question/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import debugFactory from 'debug';
-import SuggestionsEventSource from '../suggestions-event-source';
+import SuggestionsEventSource from '../suggestions-event-source/index.js';
 const debug = debugFactory('jetpack-ai-client:ask-question');
 /**
  * An asynchronous function that asks a question

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

@@ -0,0 +1,8 @@
+/**
+ * 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 function transcribeAudio(audio: Blob, feature?: string): Promise<string>;

package/build/audio-transcription/index.js

@@ -0,0 +1,49 @@
+/**
+ * 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');
+/**
+ * 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, feature) {
+    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 = 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);
+    }
+}

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

@@ -6,7 +6,7 @@ import './style.scss';
 /**
  * Types
  */
-import type { RequestingStateProp } from '../../types';
+import type { RequestingStateProp } from '../../types.js';
 type AiControlProps = {
     disabled?: boolean;
     value: string;

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

@@ -14,8 +14,8 @@ import React from 'react';
  * Internal dependencies
  */
 import './style.scss';
-import AiStatusIndicator from '../ai-status-indicator';
-import { GuidelineMessage } from './message';
+import AiStatusIndicator from '../ai-status-indicator/index.js';
+import { GuidelineMessage } from './message.js';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
 /**

package/build/components/ai-status-indicator/index.d.ts

@@ -1,4 +1,4 @@
-import type { RequestingStateProp } from '../../types';
+import type { RequestingStateProp } from '../../types.js';
 export type AiStatusIndicatorIconSize = 24 | 32 | 48 | 64;
 import type React from 'react';
 import './style.scss';

package/build/components/audio-duration-display/index.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 type AudioDurationDisplayProps = {
-    url: string;
+    duration: number;
+    className?: string | null;
 };
 /**
  * AudioDurationDisplay component.
@@ -8,5 +9,5 @@ type AudioDurationDisplayProps = {
  * @param {AudioDurationDisplayProps} props - Component props.
  * @returns {React.ReactElement}              Rendered component.
  */
-export default function AudioDurationDisplay({ url, }: AudioDurationDisplayProps): React.ReactElement;
+export default function AudioDurationDisplay({ duration, className, }: AudioDurationDisplayProps): React.ReactElement;
 export {};

package/build/components/audio-duration-display/index.js

@@ -1,25 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * External dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
 /*
  * Internal dependencies
  */
-import { formatTime, getDuration } from './lib/media';
+import { formatTime } from './lib/media.js';
 /**
  * AudioDurationDisplay component.
  *
  * @param {AudioDurationDisplayProps} props - Component props.
  * @returns {React.ReactElement}              Rendered component.
  */
-export default function AudioDurationDisplay({ url, }) {
-    const [duration, setDuration] = useState(0);
-    useEffect(() => {
-        if (!url) {
-            return;
-        }
-        getDuration(url).then(setDuration);
-    }, [url]);
-    return _jsx("span", { children: formatTime(duration, { addDecimalPart: false }) });
+export default function AudioDurationDisplay({ duration, className, }) {
+    return _jsx("span", { className: className, children: formatTime(duration, { addDecimalPart: false }) });
 }

package/build/components/audio-duration-display/lib/media.d.ts

@@ -1,29 +1,28 @@
-/**
- * Function to get duration of audio file
- *
- * @param {string} url - The url of the audio file
- * @returns {Promise<number>} The duration of the audio file
- * @see https://stackoverflow.com/questions/21522036/html-audio-tag-duration-always-infinity
- */
-export declare function getDuration(url: string): Promise<number>;
 type FormatTimeOptions = {
     /**
      * Whether to add the decimal part to the formatted time.
-     *
      */
     addDecimalPart?: boolean;
+    /**
+     * Whether to show the minutes part of the formatted time even when it's 0.
+     */
+    showMinutes?: boolean;
+    /**
+     * Whether to show the hours part of the formatted time even when it's 0.
+     */
+    showHours?: boolean;
 };
 /**
  * Formats the given time in milliseconds into a string with the format HH:MM:SS.DD,
  * adding hours and minutes only when needed.
  *
- * @param {number} time               - The time in seconds to format.
+ * @param {number} time               - The time in milliseconds to format.
  * @param {FormatTimeOptions} options - The arguments.
  * @returns {string}                    The formatted time string.
  * @example
- * const formattedTime1 = formatTime( 1234567 );                       // Returns "20:34.56"
- * const formattedTime2 = formatTime( 45123 );                         // Returns "45.12"
- * const formattedTime3 = formatTime( 64, { addDecimalPart: false } ); // Returns "01:04"
+ * const formattedTime1 = formatTime( 1234567, { addDecimalPart: true } ); // Returns "20:34.56"
+ * const formattedTime2 = formatTime( 45123 );                             // Returns "00.45"
+ * const formattedTime3 = formatTime( 1200, { showHours: true } );         // Returns "00:00:01"
  */
-export declare function formatTime(time: number, { addDecimalPart }?: FormatTimeOptions): string;
+export declare function formatTime(time: number, { addDecimalPart, showMinutes, showHours }?: FormatTimeOptions): string;
 export {};

package/build/components/audio-duration-display/lib/media.js

@@ -1,48 +1,23 @@
-/**
- * Function to get duration of audio file
- *
- * @param {string} url - The url of the audio file
- * @returns {Promise<number>} The duration of the audio file
- * @see https://stackoverflow.com/questions/21522036/html-audio-tag-duration-always-infinity
- */
-export function getDuration(url) {
-    return new Promise(next => {
-        const tmpAudioInstance = new Audio(url);
-        tmpAudioInstance.addEventListener('durationchange', function () {
-            if (this.duration === Infinity) {
-                return;
-            }
-            const duration = this.duration;
-            tmpAudioInstance.remove(); // remove instance from memory
-            next(duration);
-        }, false);
-        tmpAudioInstance.load();
-        tmpAudioInstance.currentTime = 24 * 60 * 60; // Fake big time
-        tmpAudioInstance.volume = 0;
-        tmpAudioInstance.play(); // This will call `durationchange` event
-    });
-}
 /**
  * Formats the given time in milliseconds into a string with the format HH:MM:SS.DD,
  * adding hours and minutes only when needed.
  *
- * @param {number} time               - The time in seconds to format.
+ * @param {number} time               - The time in milliseconds to format.
  * @param {FormatTimeOptions} options - The arguments.
  * @returns {string}                    The formatted time string.
  * @example
- * const formattedTime1 = formatTime( 1234567 );                       // Returns "20:34.56"
- * const formattedTime2 = formatTime( 45123 );                         // Returns "45.12"
- * const formattedTime3 = formatTime( 64, { addDecimalPart: false } ); // Returns "01:04"
+ * const formattedTime1 = formatTime( 1234567, { addDecimalPart: true } ); // Returns "20:34.56"
+ * const formattedTime2 = formatTime( 45123 );                             // Returns "00.45"
+ * const formattedTime3 = formatTime( 1200, { showHours: true } );         // Returns "00:00:01"
  */
-export function formatTime(time, { addDecimalPart = true } = {}) {
-    time = time * 1000;
+export function formatTime(time, { addDecimalPart = false, showMinutes = true, showHours = false } = {}) {
     const hours = Math.floor(time / 3600000);
     const minutes = Math.floor(time / 60000) % 60;
     const seconds = Math.floor(time / 1000) % 60;
     const deciseconds = Math.floor(time / 10) % 100;
     const parts = [
-        hours > 0 ? hours.toString().padStart(2, '0') + ':' : '',
-        hours > 0 || minutes > 0 ? minutes.toString().padStart(2, '0') + ':' : '',
+        hours > 0 || showHours ? hours.toString().padStart(2, '0') + ':' : '',
+        hours > 0 || minutes > 0 || showMinutes ? minutes.toString().padStart(2, '0') + ':' : '',
         seconds.toString().padStart(2, '0'),
     ];
     if (addDecimalPart) {

package/build/components/index.d.ts

@@ -1,4 +1,4 @@
-export { default as AIControl } from './ai-control';
-export { default as AiStatusIndicator } from './ai-status-indicator';
-export { default as AudioDurationDisplay } from './audio-duration-display';
-export { GuidelineMessage, default as FooterMessage } from './ai-control/message';
+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';

package/build/components/index.js

@@ -1,4 +1,4 @@
-export { default as AIControl } from './ai-control';
-export { default as AiStatusIndicator } from './ai-status-indicator';
-export { default as AudioDurationDisplay } from './audio-duration-display';
-export { GuidelineMessage, default as FooterMessage } from './ai-control/message';
+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';

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

@@ -2,11 +2,11 @@ import React from 'react';
 /**
  * Types & Constants
  */
-import SuggestionsEventSource from '../suggestions-event-source';
-import type { AskQuestionOptionsArgProps } from '../ask-question';
-import type { RequestingErrorProps } from '../hooks/use-ai-suggestions';
-import type { PromptProp } from '../types';
-import type { RequestingStateProp } from '../types';
+import SuggestionsEventSource from '../suggestions-event-source/index.js';
+import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
+import type { RequestingErrorProps } from '../hooks/use-ai-suggestions/index.js';
+import type { PromptProp } from '../types.js';
+import type { RequestingStateProp } from '../types.js';
 export type AiDataContextProps = {
     suggestion: string;
     requestingError: RequestingErrorProps;

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

@@ -1,3 +1,3 @@
-export { AiDataContext, AiDataContextProvider } from './context';
-export { default as withAiDataProvider } from './with-ai-assistant-data';
-export { default as useAiContext } from './use-ai-context';
+export { AiDataContext, AiDataContextProvider } from './context.js';
+export { default as withAiDataProvider } from './with-ai-assistant-data.js';
+export { default as useAiContext } from './use-ai-context.js';

package/build/data-flow/index.js

@@ -1,3 +1,3 @@
-export { AiDataContext, AiDataContextProvider } from './context';
-export { default as withAiDataProvider } from './with-ai-assistant-data';
-export { default as useAiContext } from './use-ai-context';
+export { AiDataContext, AiDataContextProvider } from './context.js';
+export { default as withAiDataProvider } from './with-ai-assistant-data.js';
+export { default as useAiContext } from './use-ai-context.js';

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

@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import { RequestingErrorProps } from '../types';
+import { RequestingErrorProps } from '../types.js';
 /**
  * Types & constants
  */
-import type { AiDataContextProps } from './context';
-import type { AskQuestionOptionsArgProps } from '../ask-question';
+import type { AiDataContextProps } from './context.js';
+import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
 export type UseAiContextOptions = {
     askQuestionOptions?: AskQuestionOptionsArgProps;
     onDone?: (content: string) => void;

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

@@ -5,8 +5,8 @@ import { useCallback, useContext, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { ERROR_RESPONSE } from '../types';
-import { AiDataContext } from '.';
+import { ERROR_RESPONSE } from '../types.js';
+import { AiDataContext } from './index.js';
 /**
  * useAiContext hook to provide access to
  * the AI Assistant data (from context),

package/build/data-flow/with-ai-assistant-data.js

@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal Dependencies
  */
-import useAiSuggestions from '../hooks/use-ai-suggestions';
-import { AiDataContextProvider } from '.';
+import useAiSuggestions from '../hooks/use-ai-suggestions/index.js';
+import { AiDataContextProvider } from './index.js';
 /**
  * High Order Component that provides the
  * AI Assistant Data context to the wrapped component.

package/build/hooks/use-ai-suggestions/index.d.ts

@@ -1,10 +1,10 @@
 /**
  * Types & constants
  */
-import type { AskQuestionOptionsArgProps } from '../../ask-question';
-import type SuggestionsEventSource from '../../suggestions-event-source';
-import type { PromptProp, SuggestionErrorCode } from '../../types';
-import type { RequestingStateProp } from '../../types';
+import type { AskQuestionOptionsArgProps } from '../../ask-question/index.js';
+import type SuggestionsEventSource from '../../suggestions-event-source/index.js';
+import type { PromptProp, SuggestionErrorCode } from '../../types.js';
+import type { RequestingStateProp } from '../../types.js';
 export type RequestingErrorProps = {
     code: SuggestionErrorCode;
     message: string;

package/build/hooks/use-ai-suggestions/index.js

@@ -7,8 +7,8 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import askQuestion from '../../ask-question';
-import { ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../../types';
+import askQuestion from '../../ask-question/index.js';
+import { ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../../types.js';
 const debug = debugFactory('jetpack-ai-client:use-suggestion');
 /**
  * Get the error data for a given error code.

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

@@ -0,0 +1,24 @@
+/**
+ * The response from the audio transcription hook.
+ */
+export type UseAudioTranscriptionReturn = {
+    transcriptionResult: string;
+    isTranscribingAudio: boolean;
+    transcriptionError: string;
+    transcribeAudio: (audio: Blob) => void;
+};
+/**
+ * The props for the audio transcription hook.
+ */
+export type UseAudioTranscriptionProps = {
+    feature: string;
+    onReady?: (transcription: string) => void;
+    onError?: (error: string) => void;
+};
+/**
+ * A hook to handle audio transcription.
+ *
+ * @param {string} feature - The feature name that is calling the transcription.
+ * @returns {UseAudioTranscriptionReturn} - Object with properties to get the transcription data.
+ */
+export default function useAudioTranscription({ feature, onReady, onError, }: UseAudioTranscriptionProps): UseAudioTranscriptionReturn;

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

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import transcribeAudio from '../../audio-transcription/index.js';
+const debug = debugFactory('jetpack-ai-client:use-audio-transcription');
+/**
+ * A hook to handle audio transcription.
+ *
+ * @param {string} feature - The feature name that is calling the transcription.
+ * @returns {UseAudioTranscriptionReturn} - Object with properties to get the transcription data.
+ */
+export default function useAudioTranscription({ feature, onReady, onError, }) {
+    const [transcriptionResult, setTranscriptionResult] = useState('');
+    const [transcriptionError, setTranscriptionError] = useState('');
+    const [isTranscribingAudio, setIsTranscribingAudio] = useState(false);
+    const handleAudioTranscription = useCallback((audio) => {
+        debug('Transcribing audio');
+        /**
+         * Reset the transcription result and error.
+         */
+        setTranscriptionResult('');
+        setTranscriptionError('');
+        setIsTranscribingAudio(true);
+        /**
+         * Call the audio transcription library.
+         */
+        transcribeAudio(audio, feature)
+            .then(transcriptionText => {
+            setTranscriptionResult(transcriptionText);
+            onReady?.(transcriptionText);
+        })
+            .catch(error => {
+            setTranscriptionError(error.message);
+            onError?.(error.message);
+        })
+            .finally(() => setIsTranscribingAudio(false));
+    }, [transcribeAudio, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio]);
+    return {
+        transcriptionResult,
+        isTranscribingAudio,
+        transcriptionError,
+        transcribeAudio: handleAudioTranscription,
+    };
+}

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

@@ -1,6 +1,6 @@
-type RecordingStateProp = 'inactive' | 'recording' | 'paused';
+type RecordingStateProp = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
 type UseMediaRecordingProps = {
-    onDone?: (blob: Blob) => void;
+    onDone?: (blob: Blob, url: string) => void;
 };
 type UseMediaRecordingReturn = {
     /**
@@ -16,21 +16,39 @@ type UseMediaRecordingReturn = {
      */
     url: string | null;
     /**
-     * `start` recording handler
+     * The error message
      */
-    start: (timeslice?: number) => void;
+    error: string | null;
     /**
-     * `pause` recording handler
+     * The duration of the recorded audio
      */
-    pause: () => void;
+    duration: number;
     /**
-     * `resume` recording handler
+     * The error handler
      */
-    resume: () => void;
-    /**
-     * `stop` recording handler
-     */
-    stop: () => void;
+    onError: (err: string | Error) => 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;
+    };
 };
 /**
  * react custom hook to handle media recording.