Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jetpack AI Image: handle enter shortcut on user custom prompt field #38103

Merged
merged 10 commits into from
Jun 28, 2024
Merged

Jetpack AI Image: handle enter shortcut on user custom prompt field #38103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3176b1f
Add KeyboardShortcuts wrapper to handle enter commands
lhkowalski Jun 27, 2024
175991d
Fix user prompt field styling since the wrapper adds a div element on…
lhkowalski Jun 27, 2024
e0c10a8
changelog
lhkowalski Jun 27, 2024
91b5e0a
Merge branch 'trunk' into update/jetpack-ai-image-handle-enter-shortcut
lhkowalski Jun 28, 2024
c5b4594
Trim the content of the textarea before setting it to state
lhkowalski Jun 28, 2024
23db027
Rename disableGenerateButton var so it does not look like a function
lhkowalski Jun 28, 2024
75531fc
Rename disableInstructions var so it does not look like a function
lhkowalski Jun 28, 2024
1b2b2d0
Rename disableTryAgainButton var so it does not look like a function
lhkowalski Jun 28, 2024
18527a6
Rename showUpgrade var so it does not look like a function
lhkowalski Jun 28, 2024
d65a134
Rename showCounter var so it does not look like a function
lhkowalski Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/update-jetpack-ai-image-handle-enter-shortcut
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: other

Jetpack AI Image: trigger an image generation when user hits enter on the custom user prompt field.
5 changes: 5 additions & 0 deletions ...extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
display: flex;
justify-content: center;

div {
width: 100%;
display: flex;
}

textarea {
width: 100%;
outline: none;
Expand Down
47 changes: 29 additions & 18 deletions .../extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Button, Tooltip } from '@wordpress/components';
import { Button, Tooltip, KeyboardShortcuts } from '@wordpress/components';
import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Icon, external } from '@wordpress/icons';
Expand Down Expand Up @@ -74,7 +74,7 @@ export default function AiImageModal( {

const handleUserPromptChange = useCallback(
( e: React.ChangeEvent< HTMLTextAreaElement > ) => {
setUserPrompt( e.target.value );
setUserPrompt( e.target.value.trim() );
},
[ setUserPrompt ]
);
Expand All @@ -98,22 +98,22 @@ export default function AiImageModal( {
const costTooltipText = cost === 1 ? costTooltipTextSingular : costTooltipTextPlural;

// Controllers
const disableInstructions = notEnoughRequests || generating;
const showUpgrade = ( requireUpgrade || notEnoughRequests ) && ! generating;
const showCounter = Boolean( ! isUnlimited && cost && currentLimit );
const disableTryAgainButton = ! userPrompt && ! postContent;
const disableGenerateButton =
const instructionsDisabled = notEnoughRequests || generating;
const upgradePromptVisible = ( requireUpgrade || notEnoughRequests ) && ! generating;
const counterVisible = Boolean( ! isUnlimited && cost && currentLimit );
const tryAgainButtonDisabled = ! userPrompt && ! postContent;
const generateButtonDisabled =
notEnoughRequests || generating || ( ! userPrompt && ! postContent );

const tryAgainButton = (
<Button onClick={ handleTryAgain } variant="secondary" disabled={ disableTryAgainButton }>
<Button onClick={ handleTryAgain } variant="secondary" disabled={ tryAgainButtonDisabled }>
{ __( 'Try again', 'jetpack' ) }
</Button>
);

const generateButton = (
<Tooltip text={ costTooltipText } placement="bottom">
<Button onClick={ handleGenerate } variant="secondary" disabled={ disableGenerateButton }>
<Button onClick={ handleGenerate } variant="secondary" disabled={ generateButtonDisabled }>
{ generateButtonLabel }
</Button>
</Tooltip>
Expand All @@ -138,16 +138,27 @@ export default function AiImageModal( {
<div className="ai-image-modal__content">
<div className="ai-image-modal__user-prompt">
<div className="ai-image-modal__user-prompt-textarea">
<textarea
disabled={ disableInstructions }
maxLength={ 1000 }
rows={ 2 }
onChange={ handleUserPromptChange }
placeholder={ instructionsPlaceholder }
></textarea>
<KeyboardShortcuts
bindGlobal
shortcuts={ {
enter: () => {
if ( ! generateButtonDisabled ) {
handleGenerate();
}
},
} }
>
<textarea
disabled={ instructionsDisabled }
maxLength={ 1000 }
rows={ 2 }
onChange={ handleUserPromptChange }
placeholder={ instructionsPlaceholder }
></textarea>
</KeyboardShortcuts>
</div>
</div>
{ showUpgrade && (
{ upgradePromptVisible && (
<UpgradePrompt
description={ upgradeDescription }
placement={ FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT }
Expand All @@ -156,7 +167,7 @@ export default function AiImageModal( {
) }
<div className="ai-image-modal__actions">
<div className="ai-image-modal__actions-left">
{ showCounter && (
{ counterVisible && (
<UsageCounter
cost={ cost }
currentLimit={ currentLimit }
Expand Down
Loading