@automattic/jetpack-ai-client 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -5,6 +5,11 @@ 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.1.7] - 2023-09-11
+### Added
+- AI Client: add and expose reset() from useAiSuggestions() hook [#32886]
+- AI Client: introduce audio duration display component [#32825]
+
 ## [0.1.6] - 2023-09-04
 ### Added
 - AI Client: add play and pause icons [#32788]
@@ -110,6 +115,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.1.7]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.6...v0.1.7
 [0.1.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.5...v0.1.6
 [0.1.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.4...v0.1.5
 [0.1.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.3...v0.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -32,7 +32,7 @@
 		".": "./index.ts"
 	},
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.8",
+		"@automattic/jetpack-base-styles": "^0.6.9",
 		"@automattic/jetpack-connection": "^0.29.9",
 		"@automattic/jetpack-shared-extension-utils": "^0.11.4",
 		"@microsoft/fetch-event-source": "2.0.1",

package/src/components/audio-duration-display/index.tsx

@@ -0,0 +1,37 @@
+/*
+ * External dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+/*
+ * Internal dependencies
+ */
+import { formatTime, getDuration } from './lib/media';
+/*
+ * Types
+ */
+import type React from 'react';
+
+type AudioDurationDisplayProps = {
+	url: string;
+};
+
+/**
+ * AudioDurationDisplay component.
+ *
+ * @param {AudioDurationDisplayProps} props - Component props.
+ * @returns {React.ReactElement}              Rendered component.
+ */
+export default function AudioDurationDisplay( {
+	url,
+}: AudioDurationDisplayProps ): React.ReactElement {
+	const [ duration, setDuration ] = useState( 0 );
+	useEffect( () => {
+		if ( ! url ) {
+			return;
+		}
+
+		getDuration( url ).then( setDuration );
+	}, [ url ] );
+
+	return <span>{ formatTime( duration, { addDecimalPart: false } ) }</span>;
+}

package/src/components/audio-duration-display/lib/media.ts

@@ -0,0 +1,73 @@
+/**
+ * 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: string ): Promise< number > {
+	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
+	} );
+}
+
+type FormatTimeOptions = {
+	/**
+	 * Whether to add the decimal part to the formatted time.
+	 *
+	 */
+	addDecimalPart?: 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 {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"
+ */
+export function formatTime(
+	time: number,
+	{ addDecimalPart = true }: FormatTimeOptions = {}
+): string {
+	time = time * 1000;
+	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' ) + ':' : '',
+		seconds.toString().padStart( 2, '0' ),
+	];
+
+	if ( addDecimalPart ) {
+		parts.push( '.' + deciseconds.toString().padStart( 2, '0' ) );
+	}
+
+	return parts.join( '' );
+}

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as AIControl } from './ai-control';
 export { default as AiStatusIndicator } from './ai-status-indicator';
+export { default as AudioDurationDisplay } from './audio-duration-display';

package/src/hooks/use-ai-suggestions/Readme.md

@@ -36,6 +36,7 @@ An object with the following properties:
 - `requestingState: RequestingStateProp`: The state of the request.
 - `eventSource: SuggestionsEventSource | undefined`: The event source of the request.
 - `request: ( prompt: Array< PromptItemProps >, options: AskQuestionOptionsArgProps ) => Promise< void >`: The request handler.
+- `reset`: `() => void`: Reset the request state.
 
 ### `PromptItemProps`
 

package/src/hooks/use-ai-suggestions/index.ts

@@ -98,6 +98,11 @@ type useAiSuggestionsProps = {
 	 */
 	request: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => Promise< void >;
 
+	/*
+	 * Reset the request state.
+	 */
+	reset: () => void;
+
 	/*
 	 * The handler to stop a suggestion.
 	 */
@@ -294,6 +299,17 @@ export default function useAiSuggestions( {
 		]
 	);
 
+	/**
+	 * Reset the request state.
+	 *
+	 * @returns {void}
+	 */
+	const reset = useCallback( () => {
+		setRequestingState( 'init' );
+		setSuggestion( '' );
+		setError( undefined );
+	}, [] );
+
 	/**
 	 * Stop suggestion handler.
 	 *
@@ -358,9 +374,10 @@ export default function useAiSuggestions( {
 		error,
 		requestingState,
 
-		// Request/stop handlers
+		// Requests handlers
 		request,
 		stopSuggestion,
+		reset,
 
 		// SuggestionsEventSource
 		eventSource: eventSourceRef.current,

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

@@ -10,11 +10,13 @@ Based on [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaR
 
 The hook returns an object with the following properties and methods:
 
-- `start: ( timeslice ) => void`: Start the media recording
-- `pause: () => void`: Pause the current media recording
-- `resume: () => void`: Resume a paused recording
-- `stop: () => void`: Stop the current recording
-- `state: 'inactive' | 'recording' | 'paused'`: Current recording state
+- `state: 'inactive' | 'recording' | 'paused'` - Current recording state
+- `blob`: `blob` - The recorded blob
+- `url`: `string` - The recorded blob url
+- `start: ( timeslice ) => void` - Start the media recording
+- `pause: () => void` - Pause the current media recording
+- `resume: () => void` - Resume a paused recording
+- `stop: () => void` - Stop the current recording
 
 ## Example
 

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

@@ -22,6 +22,11 @@ type UseMediaRecordingReturn = {
 	 */
 	blob: Blob | null;
 
+	/**
+	 * The recorded blob url
+	 */
+	url: string | null;
+
 	/**
 	 * `start` recording handler
 	 */
@@ -195,6 +200,7 @@ export default function useMediaRecording( {
 	return {
 		state,
 		blob,
+		url: blob ? URL.createObjectURL( blob ) : null,
 
 		start,
 		pause,