@automattic/jetpack-ai-client 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.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 +92,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.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/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"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,9 +32,9 @@
 		".": "./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.6",
+		"@automattic/jetpack-connection": "^0.29.8",
+		"@automattic/jetpack-shared-extension-utils": "^0.11.3",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@wordpress/api-fetch": "6.35.0",
 		"@wordpress/block-editor": "12.6.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/stories/index.stories.tsx

@@ -52,10 +52,10 @@ const Template = args => {
 
 const DefaultArgs = {
 	loading: false,
-	isOpaque: false,
+	isTransparent: false,
 	placeholder: '',
 	requestingState: 'init',
-	showButtonsLabel: true,
+	showButtonLabels: true,
 	showAccept: false,
 	acceptLabel: 'Accept',
 	onChange: action( 'onChange' ),

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/icons/index.ts

@@ -1,3 +1,4 @@
 export { default as aiAssistantIcon } from './ai-assistant';
+export { default as micIcon } from './mic';
 export { default as origamiPlaneIcon } from './origami-plane';
 export { default as speakToneIcon } from './speak-tone';

package/src/icons/mic.tsx

@@ -0,0 +1,19 @@
+/**
+ * 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" fill="none" xmlns="http://www.w3.org/2000/SVG">
+		<Rect x="8.75" y="2.75" width="6.5" height="11.5" rx="3.25" stroke="black" stroke-width="1.5" />
+		<Line x1="12" y1="17" x2="12" y2="21" stroke="black" stroke-width="1.5" />
+		<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="black"
+			stroke-width="1.5"
+		/>
+	</SVG>
+);
+
+export default mic;

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 >;