block-suggestion-actions.jsx
3 weeks ago
block-suggestion-buttons.jsx
3 weeks ago
diff-view.jsx
3 weeks ago
empty-state-banner.jsx
3 weeks ago
section-generate-button.jsx
3 weeks ago
suggest-all-button.jsx
3 weeks ago
suggestion-actions.jsx
3 weeks ago
suggestion-badge.jsx
3 weeks ago
upgrade-notice.jsx
2 weeks ago
section-generate-button.jsx
70 lines
| 1 | import { useAiFeature } from '@automattic/jetpack-ai-client'; |
| 2 | import { Button } from '@wordpress/components'; |
| 3 | import { useDispatch, useSelect } from '@wordpress/data'; |
| 4 | import { useCallback } from '@wordpress/element'; |
| 5 | import { __ } from '@wordpress/i18n'; |
| 6 | import { store as noticesStore } from '@wordpress/notices'; |
| 7 | import { STORE_NAME } from '../constants'; |
| 8 | import { suggestGuidelines } from '../lib/api'; |
| 9 | import { recordGuidelinesEvent } from '../lib/tracks'; |
| 10 | import { AI_STORE_NAME } from '../store'; |
| 11 | |
| 12 | export default function SectionGenerateButton( { slug } ) { |
| 13 | const { createErrorNotice } = useDispatch( noticesStore ); |
| 14 | const { startSectionLoading, stopSectionLoading, setSuggestion } = useDispatch( AI_STORE_NAME ); |
| 15 | const { hasFeature } = useAiFeature(); |
| 16 | |
| 17 | const sectionLoading = useSelect( |
| 18 | select => select( AI_STORE_NAME ).isSectionLoading( slug ), |
| 19 | [ slug ] |
| 20 | ); |
| 21 | const draft = useSelect( select => select( STORE_NAME ).getGuideline( slug ), [ slug ] ); |
| 22 | |
| 23 | const isEmpty = ! draft; |
| 24 | const generateLabel = __( 'Generate guidelines', 'jetpack' ); |
| 25 | const improveLabel = __( 'Improve guidelines', 'jetpack' ); |
| 26 | const label = isEmpty ? generateLabel : improveLabel; |
| 27 | |
| 28 | const handleClick = useCallback( async () => { |
| 29 | const action = isEmpty ? 'generate' : 'improve'; |
| 30 | recordGuidelinesEvent( 'generate', { type: 'section', slug, action } ); |
| 31 | |
| 32 | startSectionLoading( slug ); |
| 33 | try { |
| 34 | const existingContent = draft ? { [ slug ]: draft } : {}; |
| 35 | const response = await suggestGuidelines( [ slug ], existingContent ); |
| 36 | const suggestion = response?.suggestions?.[ slug ]; |
| 37 | if ( ! suggestion ) { |
| 38 | throw new Error( 'No suggestion returned.' ); |
| 39 | } |
| 40 | setSuggestion( slug, suggestion ); |
| 41 | } catch { |
| 42 | createErrorNotice( __( 'Failed to generate guidelines. Please try again.', 'jetpack' ), { |
| 43 | type: 'snackbar', |
| 44 | } ); |
| 45 | } finally { |
| 46 | stopSectionLoading( slug ); |
| 47 | } |
| 48 | }, [ |
| 49 | slug, |
| 50 | draft, |
| 51 | isEmpty, |
| 52 | startSectionLoading, |
| 53 | stopSectionLoading, |
| 54 | setSuggestion, |
| 55 | createErrorNotice, |
| 56 | ] ); |
| 57 | |
| 58 | return ( |
| 59 | <Button |
| 60 | variant="tertiary" |
| 61 | onClick={ handleClick } |
| 62 | disabled={ sectionLoading || ! hasFeature } |
| 63 | accessibleWhenDisabled |
| 64 | className="jetpack-content-guidelines-ai__section-generate-button" |
| 65 | > |
| 66 | { label } |
| 67 | </Button> |
| 68 | ); |
| 69 | } |
| 70 |