AI Extension: Add keyboard shortcut for stop action on forms and upda…

…te text (#33271) * add stop shortcut to AIControl component * add tooltip to Stop action * update component story * remove tooltip in favor of permanent text * focus on prompt after stop for forms * changelog * remove esc shortcut from AIControl component * move shortcuts to KeyboardShortcuts wrapper component * move focus logic on Form extension to AIAssistantBar component * bump version
Automattic · Sep 26, 2023 · 05aa446 · 05aa446
1 parent fbba36d
commit 05aa446
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 217 deletions.
diff --git a/projects/js-packages/ai-client/changelog/update-ai-control-stop-text b/projects/js-packages/ai-client/changelog/update-ai-control-stop-text
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+AI Client: Add keyboard shortcut text next to Stop action
diff --git a/projects/js-packages/ai-client/package.json b/projects/js-packages/ai-client/package.json
@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.9",
+	"version": "0.1.10-alpha",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {

diff --git a/projects/js-packages/ai-client/src/components/ai-control/index.tsx b/projects/js-packages/ai-client/src/components/ai-control/index.tsx
@@ -143,7 +143,7 @@ export function AIControl(
 					{ ! loading ? (
 						<Button
 							className={ actionButtonClasses }
-							onClick={ () => onSend( value ) }
+							onClick={ () => onSend?.( value ) }
 							isSmall={ true }
 							disabled={ ! value?.length || disabled }
 							label={ __( 'Send request', 'jetpack-ai-client' ) }
@@ -159,7 +159,7 @@ export function AIControl(
 							label={ __( 'Stop request', 'jetpack-ai-client' ) }
 						>
 							<Icon icon={ closeSmall } />
-							{ showButtonLabels && __( 'Stop', 'jetpack-ai-client' ) }
+							{ showButtonLabels && __( 'Stop (ESC)', 'jetpack-ai-client' ) }
 						</Button>
 					) }
 				</div>

diff --git a/projects/js-packages/ai-client/src/components/ai-control/stories/index.stories.tsx b/projects/js-packages/ai-client/src/components/ai-control/stories/index.stories.tsx
@@ -25,7 +25,7 @@ export default {
 		),
 	],
 	argTypes: {
-		requestingState: {
+		state: {
 			control: {
 				type: 'select',
 			},
@@ -51,10 +51,9 @@ const Template = args => {
 };
 
 const DefaultArgs = {
-	loading: false,
 	isTransparent: false,
 	placeholder: '',
-	requestingState: 'init',
+	state: 'init',
 	showButtonLabels: true,
 	showAccept: false,
 	acceptLabel: 'Accept',

diff --git a/projects/plugins/jetpack/changelog/update-ai-control-stop-text b/projects/plugins/jetpack/changelog/update-ai-control-stop-text
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+AI Extension: Add keyboard shortcut for stop action on forms