@automattic/jetpack-ai-client 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -5,6 +5,34 @@ 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.6] - 2023-09-04
+### Added
+- AI Client: add play and pause icons [#32788]
+- AI Client: add player stop button icon [#32728]
+- AI Client: create blob audio data. Introduce onDone() callback [#32791]
+- AI Client: improve useMediaRecorder() timeslice recording option [#32805]
+- AI Client: introduce useMediaRecording() hook [#32767]
+
+### Changed
+- AI Client: minor change in useMediaRecording() hook example [#32769]
+- Updated package dependencies. [#32803]
+
+### Removed
+- Remove unnecessary files from mirror repo and published package. [#32674]
+
+### Fixed
+- AI Client: fix mic icon visual issue in Safari [#32787]
+
+## [0.1.5] - 2023-08-28
+### Added
+- AI Client: add mic icon [#32665]
+
+### Changed
+- AI Assistant: Change messages to turn content optional and start supporting a context property. [#32495]
+- AI Extension: Add showClearButton prop to AIControl component and fix names [#32682]
+- AI Extension: Specify input background color [#32628]
+- Updated package dependencies. [#32605]
+
 ## [0.1.4] - 2023-08-14
 ### Added
 - AI Client: Add border-box in AIControl. [#32419]
@@ -82,6 +110,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[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
 [0.1.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.1...v0.1.2

package/index.ts

@@ -9,6 +9,7 @@ export { default as askQuestion } from './src/ask-question';
  * Hooks
  */
 export { default as useAiSuggestions } from './src/hooks/use-ai-suggestions';
+export { default as useMediaRecording } from './src/hooks/use-media-recording';
 
 /*
  * Components: Icons

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"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,18 +32,18 @@
 		".": "./index.ts"
 	},
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.5",
-		"@automattic/jetpack-connection": "workspace:*",
-		"@automattic/jetpack-shared-extension-utils": "^0.11.1",
+		"@automattic/jetpack-base-styles": "^0.6.8",
+		"@automattic/jetpack-connection": "^0.29.9",
+		"@automattic/jetpack-shared-extension-utils": "^0.11.4",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@wordpress/api-fetch": "6.35.0",
-		"@wordpress/block-editor": "12.6.0",
-		"@wordpress/components": "25.4.0",
-		"@wordpress/compose": "6.15.0",
-		"@wordpress/data": "9.8.0",
-		"@wordpress/element": "5.15.0",
-		"@wordpress/i18n": "4.38.0",
-		"@wordpress/icons": "9.29.0",
+		"@wordpress/api-fetch": "6.38.0",
+		"@wordpress/block-editor": "12.9.0",
+		"@wordpress/components": "25.7.0",
+		"@wordpress/compose": "6.18.0",
+		"@wordpress/data": "9.11.0",
+		"@wordpress/element": "5.18.0",
+		"@wordpress/i18n": "4.41.0",
+		"@wordpress/icons": "9.32.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/components/ai-control/Readme.md

@@ -7,9 +7,10 @@
 - `placeholder` (**string**) (Optional): Placeholder text for the input field. Default value is `''`.
 - `showAccept` (**boolean**) (Optional): Determines if the accept button is shown. Default value is `false`.
 - `acceptLabel` (**string**) (Optional): Label text for the accept button. Default value is `'Accept'`.
-- `showButtonsLabel` (**boolean**) (Optional): Determines if button labels are shown. Default value is `true`.
-- `isOpaque` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
+- `showButtonLabels` (**boolean**) (Optional): Determines if button labels are shown. Default value is `true`.
+- `isTransparent` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
 - `state` (**RequestingStateProp**) (Optional): Determines the state of the component. Default value is `'init'`.
+- `showClearButton` (**boolean**) (Optional): Determines if the clear button is shown when the input has a value. Default value is `true`.
 - `onChange` (**Function**) (Optional): Handler for input change. Default action is no operation.
 - `onSend` (**Function**) (Optional): Handler to send a request. Default action is no operation.
 - `onStop` (**Function**) (Optional): Handler to stop a request. Default action is no operation.

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

@@ -26,20 +26,21 @@ const noop = () => {};
 /**
  * AI Control component.
  *
- * @param {object} props - component props
- * @param {boolean} props.disabled - is disabled
- * @param {string} props.value - input value
- * @param {string} props.placeholder - input placeholder
- * @param {boolean} props.showAccept - show accept button
- * @param {string} props.acceptLabel - accept button label
- * @param {boolean} props.showButtonsLabel - show buttons label
- * @param {boolean} props.isOpaque - is opaque
- * @param {string} props.state - requesting state
- * @param {Function} props.onChange - input change handler
- * @param {Function} props.onSend - send request handler
- * @param {Function} props.onStop - stop request handler
- * @param {Function} props.onAccept - accept handler
- * @param {object} ref - Auto injected ref from react
+ * @param {object} props                   - Component props
+ * @param {boolean} props.disabled         - Input disabled state
+ * @param {string} props.value             - The input value
+ * @param {string} props.placeholder       - The input placeholder
+ * @param {boolean} props.showAccept       - Whether to show the accept button
+ * @param {string} props.acceptLabel       - The accept button label
+ * @param {boolean} props.showButtonLabels - Whether to show the button labels
+ * @param {boolean} props.isTransparent    - Whether the component has low opacity
+ * @param {string} props.state             - The request state
+ * @param {boolean} props.showClearButton  - Whether to show the clear button when the input has a value
+ * @param {Function} props.onChange        - Input change handler
+ * @param {Function} props.onSend          - Request send handler
+ * @param {Function} props.onStop          - Request stop handler
+ * @param {Function} props.onAccept        - Response accept handler
+ * @param {object} ref                     - Auto injected ref from react
  * @returns {object} - AI Control component
  */
 export function AIControl(
@@ -49,9 +50,10 @@ export function AIControl(
 		placeholder = '',
 		showAccept = false,
 		acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
-		showButtonsLabel = true,
-		isOpaque = false,
+		showButtonLabels = true,
+		isTransparent = false,
 		state = 'init',
+		showClearButton = true,
 		onChange = noop,
 		onSend = noop,
 		onStop = noop,
@@ -62,9 +64,10 @@ export function AIControl(
 		placeholder?: string;
 		showAccept?: boolean;
 		acceptLabel?: string;
-		showButtonsLabel?: boolean;
-		isOpaque?: boolean;
+		showButtonLabels?: boolean;
+		isTransparent?: boolean;
 		state?: RequestingStateProp;
+		showClearButton?: boolean;
 		onChange?: ( newValue: string ) => void;
 		onSend?: ( currentValue: string ) => void;
 		onStop?: () => void;
@@ -74,7 +77,7 @@ export function AIControl(
 ) {
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
-	const showGuideLine = ! ( loading || disabled || value?.length || isOpaque );
+	const showGuideLine = ! ( loading || disabled || value?.length || isTransparent );
 
 	// Pass the ref to forwardRef.
 	useImperativeHandle( ref, () => promptUserInputRef.current );
@@ -103,14 +106,14 @@ export function AIControl(
 	);
 
 	const actionButtonClasses = classNames( 'jetpack-components-ai-control__controls-prompt_button', {
-		'has-label': showButtonsLabel,
+		'has-label': showButtonLabels,
 	} );
 
 	return (
 		<div className="jetpack-components-ai-control__container">
 			<div
 				className={ classNames( 'jetpack-components-ai-control__wrapper', {
-					'is-opaque': isOpaque,
+					'is-transparent': isTransparent,
 				} ) }
 			>
 				<AiStatusIndicator state={ state } />
@@ -126,7 +129,7 @@ export function AIControl(
 					/>
 				</div>
 
-				{ value?.length > 0 && (
+				{ value?.length > 0 && showClearButton && (
 					<Button
 						icon={ closeSmall }
 						className="jetpack-components-ai-control__clear"
@@ -144,7 +147,7 @@ export function AIControl(
 							label={ __( 'Send request', 'jetpack-ai-client' ) }
 						>
 							<Icon icon={ arrowUp } />
-							{ showButtonsLabel && __( 'Send', 'jetpack-ai-client' ) }
+							{ showButtonLabels && __( 'Send', 'jetpack-ai-client' ) }
 						</Button>
 					) : (
 						<Button
@@ -154,7 +157,7 @@ export function AIControl(
 							label={ __( 'Stop request', 'jetpack-ai-client' ) }
 						>
 							<Icon icon={ closeSmall } />
-							{ showButtonsLabel && __( 'Stop', 'jetpack-ai-client' ) }
+							{ showButtonLabels && __( 'Stop', 'jetpack-ai-client' ) }
 						</Button>
 					) }
 				</div>
@@ -168,7 +171,7 @@ export function AIControl(
 							label={ acceptLabel }
 						>
 							<Icon icon={ check } />
-							{ showButtonsLabel && acceptLabel }
+							{ showButtonLabels && acceptLabel }
 						</Button>
 					</div>
 				) }

package/src/components/ai-control/style.scss

@@ -17,7 +17,7 @@
 	align-items: center;
 	box-sizing: border-box;
 
-	&.is-opaque {
+	&.is-transparent {
 		opacity: 0.4;
 	}
 }
@@ -29,6 +29,7 @@
 	width: 100%;
 
 	textarea.jetpack-components-ai-control__input {
+		background-color: var( --jp-white );
 		width: 100%;
 		min-height: 20px;
 		border-radius: 2px;

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

@@ -0,0 +1,48 @@
+# `useMediaRecording` Custom React Hook
+
+## Description
+
+`useMediaRecording` is a custom React hook for handling media recording functionalities in a React application. It provides an easy way to start, pause, resume, and stop media recording, as well as to track the current recording state.
+
+Based on [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) API
+
+## API
+
+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
+
+## Example
+
+Here's an example React component that utilizes the `useMediaRecording` hook.
+
+```jsx
+import useMediaRecording from './useMediaRecording';
+
+const MediaRecorderComponent = () => {
+	const { start, pause, resume, stop, state } = useMediaRecording();
+
+	return (
+		<div>
+			<h1>Media Recorder</h1>
+			<p>Current State: { state }</p>
+			<button onClick={ start } disabled={ state !== 'inactive' }>
+				Start
+			</button>
+			<button onClick={ pause } disabled={ state !== 'recording' }>
+				Pause
+			</button>
+			<button onClick={ resume } disabled={ state !== 'paused' }>
+				Resume
+			</button>
+			<button onClick={ stop } disabled={ state === 'inactive' }>
+				Stop
+			</button>
+		</div>
+	);
+};
+```

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

@@ -0,0 +1,204 @@
+/**
+ * External dependencies
+ */
+import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
+
+/*
+ * Types
+ */
+type RecordingStateProp = 'inactive' | 'recording' | 'paused';
+type UseMediaRecordingProps = {
+	onDone?: ( blob: Blob ) => void;
+};
+
+type UseMediaRecordingReturn = {
+	/**
+	 * The current recording state
+	 */
+	state: RecordingStateProp;
+
+	/**
+	 * The recorded blob
+	 */
+	blob: Blob | null;
+
+	/**
+	 * `start` recording handler
+	 */
+	start: ( timeslice?: number ) => void;
+
+	/**
+	 * `pause` recording handler
+	 */
+	pause: () => void;
+
+	/**
+	 * `resume` recording handler
+	 */
+	resume: () => void;
+
+	/**
+	 * `stop` recording handler
+	 */
+	stop: () => void;
+};
+
+type MediaRecorderEvent = {
+	data: Blob;
+};
+
+/**
+ * react custom hook to handle media recording.
+ *
+ * @param {UseMediaRecordingProps} props - The props
+ * @returns {UseMediaRecordingReturn} The media recorder instance
+ */
+export default function useMediaRecording( {
+	onDone,
+}: UseMediaRecordingProps = {} ): UseMediaRecordingReturn {
+	// Reference to the media recorder instance
+	const mediaRecordRef = useRef( null );
+
+	// Recording state: `inactive`, `recording`, `paused`
+	const [ state, setState ] = useState< RecordingStateProp >( 'inactive' );
+
+	// The recorded blob
+	const [ blob, setBlob ] = useState< Blob | null >( null );
+
+	// Store the recorded chunks
+	const recordedChunks = useRef< Array< Blob > >( [] ).current;
+
+	/**
+	 * Get the recorded blob.
+	 *
+	 * @returns {Blob} The recorded blob
+	 */
+	function getBlob() {
+		return new Blob( recordedChunks, {
+			type: 'audio/webm',
+		} );
+	}
+
+	// `start` recording handler
+	const start = useCallback( ( timeslice: number ) => {
+		if ( ! timeslice ) {
+			return mediaRecordRef?.current?.start();
+		}
+
+		if ( timeslice < 100 ) {
+			timeslice = 100; // set minimum timeslice to 100ms
+		}
+		mediaRecordRef?.current?.start( timeslice );
+	}, [] );
+
+	// `pause` recording handler
+	const pause = useCallback( () => {
+		mediaRecordRef?.current?.pause();
+	}, [] );
+
+	// `resume` recording handler
+	const resume = useCallback( () => {
+		mediaRecordRef?.current?.resume();
+	}, [] );
+
+	// `stop` recording handler
+	const stop = useCallback( () => {
+		mediaRecordRef?.current?.stop();
+	}, [] );
+
+	/**
+	 * `start` event listener for the media recorder instance.
+	 */
+	function onStartListener() {
+		setState( 'recording' );
+	}
+
+	/**
+	 * `stop` event listener for the media recorder instance.
+	 *
+	 * @returns {void}
+	 */
+	function onStopListener(): void {
+		setState( 'inactive' );
+		onDone?.( getBlob() );
+
+		// Clear the recorded chunks
+		recordedChunks.length = 0;
+	}
+
+	/**
+	 * `pause` event listener for the media recorder instance.
+	 */
+	function onPauseListener() {
+		setState( 'paused' );
+	}
+
+	/**
+	 * `resume` event listener for the media recorder instance.
+	 */
+	function onResumeListener() {
+		setState( 'recording' );
+	}
+
+	/**
+	 * `dataavailable` event listener for the media recorder instance.
+	 *
+	 * @param {MediaRecorderEvent} event - The event object
+	 * @returns {void}
+	 */
+	function onDataAvailableListener( event: MediaRecorderEvent ): void {
+		const { data } = event;
+		if ( ! data?.size ) {
+			return;
+		}
+
+		// Store the recorded chunks
+		recordedChunks.push( data );
+
+		// 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;
+		}
+
+		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;
+			} );
+		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 );
+		};
+	}, [] );
+
+	return {
+		state,
+		blob,
+
+		start,
+		pause,
+		resume,
+		stop,
+	};
+}

package/src/icons/index.ts

@@ -1,3 +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';

package/src/icons/mic.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { SVG, Rect, Line, 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"
+		/>
+		<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"
+		/>
+	</SVG>
+);
+
+export default mic;

package/src/icons/player-pause.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+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">
+		<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"
+		/>
+		<Rect x="17" y="12" width="3" height="8" fill="currentColor" />
+		<Rect x="12" y="12" width="3" height="8" fill="currentColor" />
+	</SVG>
+);
+
+export default playerPause;

package/src/icons/player-play.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const playerPlay = (
+	<SVG width="32" height="32" viewBox="0 0 32 32" 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"
+		/>
+		<Path
+			d="M20.1838 15.098C20.8674 15.5051 20.8675 16.4949 20.1839 16.902L14.8877 20.0553C14.188 20.4719 13.301 19.9677 13.301 19.1533L13.301 12.8467C13.301 12.0323 14.188 11.5281 14.8877 11.9447L20.1838 15.098Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
+
+export default playerPlay;

package/src/icons/player-stop.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { SVG, Rect, Path } from '@wordpress/components';
+import React from 'react';
+
+const playerStop = (
+	<SVG width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/SVG">
+		<Path
+			d="M16.0002 6.33301C14.7307 6.33301 13.4737 6.58304 12.3009 7.06884C11.1281 7.55463 10.0624 8.26668 9.1648 9.16431C8.26716 10.0619 7.55512 11.1276 7.06933 12.3004C6.58353 13.4732 6.3335 14.7302 6.3335 15.9997C6.3335 17.2691 6.58353 18.5261 7.06933 19.6989C7.55512 20.8718 8.26716 21.9374 9.1648 22.835C10.0624 23.7327 11.1281 24.4447 12.3009 24.9305C13.4737 25.4163 14.7307 25.6663 16.0002 25.6663C18.5639 25.6663 21.0227 24.6479 22.8355 22.835C24.6484 21.0222 25.6668 18.5634 25.6668 15.9997C25.6668 13.4359 24.6484 10.9772 22.8355 9.16431C21.0227 7.35146 18.5639 6.33301 16.0002 6.33301ZM4.3335 15.9997C4.3335 12.9055 5.56266 9.93802 7.75058 7.7501C9.93851 5.56217 12.906 4.33301 16.0002 4.33301C19.0944 4.33301 22.0618 5.56217 24.2497 7.7501C26.4377 9.93802 27.6668 12.9055 27.6668 15.9997C27.6668 19.0939 26.4377 22.0613 24.2497 24.2493C22.0618 26.4372 19.0944 27.6663 16.0002 27.6663C12.906 27.6663 9.93851 26.4372 7.75058 24.2493C5.56266 22.0613 4.3335 19.0939 4.3335 15.9997Z"
+			fill="currentColor"
+		/>
+		<Rect x="12" y="12" width="8" height="8" fill="currentColor" />
+	</SVG>
+);
+
+export default playerStop;

package/src/types.ts

@@ -18,7 +18,8 @@ export type SuggestionErrorCode =
  */
 export type PromptItemProps = {
 	role: 'system' | 'user' | 'assistant';
-	content: string;
+	content?: string;
+	context?: object;
 };
 
 export type PromptMessagesProp = Array< PromptItemProps >;

package/.gitattributes

@@ -1,7 +0,0 @@
-# Files not needed to be distributed in the package.
-.gitattributes    export-ignore
-node_modules      export-ignore
-
-# Files to exclude from the mirror repo
-/changelog/**     production-exclude
-/.eslintrc.cjs    production-exclude

package/jest.config.cjs

@@ -1,5 +0,0 @@
-const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
-
-module.exports = {
-	...baseConfig,
-};

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

@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import { action } from '@storybook/addon-actions';
-import { useState } from '@wordpress/element';
-import React from 'react';
-/**
- * Internal dependencies
- */
-import { REQUESTING_STATES } from '../../../types';
-import AIControl from '../index';
-/**
- * Types
- */
-import type { Meta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/AI Client/AI Control',
-	component: AIControl,
-	decorators: [
-		Story => (
-			<div style={ { backgroundColor: 'white' } }>
-				<Story />
-			</div>
-		),
-	],
-	argTypes: {
-		requestingState: {
-			control: {
-				type: 'select',
-			},
-			options: REQUESTING_STATES,
-		},
-	},
-	parameters: {
-		controls: {
-			exclude: /on[A-Z].*/,
-		},
-	},
-} as Meta< typeof AIControl >;
-
-const Template = args => {
-	const [ value, setValue ] = useState( '' );
-
-	const handleChange = ( newValue: string ) => {
-		setValue( newValue );
-		args?.onChange?.( newValue );
-	};
-
-	return <AIControl { ...args } onChange={ handleChange } value={ args?.value ?? value } />;
-};
-
-const DefaultArgs = {
-	loading: false,
-	isOpaque: false,
-	placeholder: '',
-	requestingState: 'init',
-	showButtonsLabel: true,
-	showAccept: false,
-	acceptLabel: 'Accept',
-	onChange: action( 'onChange' ),
-	onSend: action( 'onSend' ),
-	onStop: action( 'onStop' ),
-	onAccept: action( 'onAccept' ),
-};
-
-export const Default = Template.bind( {} );
-Default.args = DefaultArgs;

package/src/components/ai-status-indicator/stories/index.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
-import AiStatusIndicator from '../index';
-import * as AiStatusIndicatorStory from './index.stories';
-
-<Meta of={AiStatusIndicatorStory} />
-
-# AiStatusIndicator
-
-## Requesting states
-
-### Init
-<Story id="js-packages-ai-client-aistatusindicator--init" />
-
-### Requesting
-<Story id="js-packages-ai-client-aistatusindicator--requesting" />
-
-### Suggesting
-<Story id="js-packages-ai-client-aistatusindicator--suggesting" />
-
-### Done
-<Story id="js-packages-ai-client-aistatusindicator--done" />
-
-### Error
-<Story id="js-packages-ai-client-aistatusindicator--error" />
-

package/src/components/ai-status-indicator/stories/index.stories.tsx

@@ -1,84 +0,0 @@
-/*
- * External Dependencies
- */
-import React from 'react';
-/*
- * Internal Dependencies
- */
-import AiStatusIndicator, { AiStatusIndicatorProps } from '..';
-import { REQUESTING_STATES } from '../../../types';
-
-type AiStatusIndicatoryStoryProps = AiStatusIndicatorProps & {
-	icon: string;
-	children?: React.ReactNode;
-};
-
-export default {
-	title: 'JS Packages/AI Client/AiStatusIndicator',
-	component: AiStatusIndicator,
-	argTypes: {
-		state: {
-			control: {
-				type: 'select',
-			},
-			options: REQUESTING_STATES,
-		},
-		size: {
-			control: {
-				type: 'select',
-			},
-			options: [ 24, 32, 48, 64 ],
-		},
-
-		action: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-};
-
-const DefaultTemplate = ( args: AiStatusIndicatoryStoryProps ) => {
-	const props: AiStatusIndicatorProps = {
-		state: args.state,
-		size: args.size,
-	};
-
-	return <AiStatusIndicator { ...props } />;
-};
-
-export const _default = DefaultTemplate.bind( {} );
-_default.args = {
-	state: 'init',
-	size: 24,
-};
-
-export const Init = DefaultTemplate.bind( {} );
-Init.args = {
-	state: 'init',
-	size: 48,
-};
-
-export const Requesting = DefaultTemplate.bind( {} );
-Requesting.args = {
-	state: 'requesting',
-	size: 48,
-};
-
-export const Suggesting = DefaultTemplate.bind( {} );
-Suggesting.args = {
-	state: 'suggesting',
-	size: 48,
-};
-
-export const Error = DefaultTemplate.bind( {} );
-Error.args = {
-	state: 'error',
-	size: 48,
-};
-
-export const Done = DefaultTemplate.bind( {} );
-Done.args = {
-	state: 'done',
-	size: 48,
-};

package/src/icons/stories/index.stories.tsx

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-import React from 'react';
-/**
- * Internal dependencies
- */
-import * as allIcons from '../index';
-import styles from './style.module.scss';
-/**
- * Types
- */
-import type { Meta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/AI Client/Icons',
-	component: allIcons,
-	parameters: {},
-} as Meta< typeof allIcons >;
-
-/**
- * Icons story components.
- *
- * @returns {object} - story component
- */
-function IconsStory() {
-	return (
-		<div className={ styles[ 'icons-container' ] }>
-			{ Object.entries( allIcons ).map( ( [ name, icon ] ) => {
-				return (
-					<div key={ name } className={ styles[ 'icon-container' ] }>
-						<Icon icon={ icon } size={ 32 } />
-						<div className={ styles[ 'icon-name' ] }>{ name }</div>
-					</div>
-				);
-			} ) }
-		</div>
-	);
-}
-
-const Template = args => <IconsStory { ...args } />;
-
-const DefaultArgs = {};
-export const Default = Template.bind( {} );
-Default.args = DefaultArgs;

package/src/icons/stories/style.module.scss

@@ -1,21 +0,0 @@
-.icons-container {
-	display: flex;
-	flex-wrap: wrap;
-	margin-bottom: 20px;
-	flex-direction: column;
-}
-
-.icon-container {
-	padding: 10px;
-	box-shadow: 0 0 1px inset rgba(0, 0, 0 , 0.5 );
-	background-color: white;
-	border-radius: 5px;
-	margin: 2px;
-	display: flex;
-	gap: 8px;
-	align-items: center;
-}
-
-.icon-name {
-	font-size: 14px;
-}

package/tests/index.test.js

@@ -1,13 +0,0 @@
-// We recommend using `jest` for testing. If you're testing React code, we recommend `@testing-library/react` and related packages.
-// Please match the versions used elsewhere in the monorepo.
-//
-// Please don't add new uses of `mocha`, `chai`, `sinon`, `enzyme`, and so on. We're trying to standardize on one testing framework.
-//
-// The default setup is to have files named like "name.test.js" (or .jsx, .ts, or .tsx) in this `tests/` directory.
-// But you could instead put them in `src/`, or put files like "name.js" (or .jsx, .ts, or .tsx) in `test` or `__tests__` directories somewhere.
-
-describe( 'ai-client', () => {
-	it( 'should export something', () => {
-		expect( true ).toBe( true );
-	} );
-} );