← All changes | src/Draft/components/image-generation/GenerateForm.jsx +17 -17 3.1.3 → 3.2.2 View file →

		@@ -1,38 +1,30 @@
1	1	import { CreditCounter } from '@draft/components/image-generation/CreditCounter';
2	2	import { useImageGenerationStore } from '@shared/state/generate-images';
3	3	import {
4	4	Button,
	5	+ CheckboxControl,
5	6	TextareaControl,
6	7	__experimentalToggleGroupControl as ToggleGroupControl,
7	8	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
8	9	} from '@wordpress/components';
9		-import { useEffect, useState } from '@wordpress/element';
10	10	import { __ } from '@wordpress/i18n';
11	11
12		-export const GenerateForm = ({ isGenerating, errorMessage }) => {
13		- const { imageCredits, resetImageCredits, aiImageOptions, setAiImageOption } =
	12	+export const GenerateForm = ({
	13	+ isGenerating,
	14	+ errorMessage,
	15	+ disclose,
	16	+ setDisclose,
	17	+}) => {
	18	+ const { imageCredits, aiImageOptions, setAiImageOption } =
14	19	useImageGenerationStore();
15	20	const usedCredits = imageCredits.total - imageCredits.remaining;
16		- const [refreshCheck, setRefreshCheck] = useState(0);
17	21	const { size, prompt } = aiImageOptions;
18	22
19		- useEffect(() => {
20		- const handle = () => {
21		- setRefreshCheck((prev) => prev + 1);
22		- if (!imageCredits.refresh) return;
23		- if (new Date(Number(imageCredits.refresh)) > new Date()) return;
24		- resetImageCredits();
25		- };
26		- if (refreshCheck === 0) handle(); // First run
27		- const id = setTimeout(handle, 1000);
28		- return () => clearTimeout(id);
29		- }, [imageCredits, resetImageCredits, refreshCheck]);
30		-
31	23	return (
32	24	<>
33	25	{isGenerating ? null : (
34		- <div>
	26	+ <div className="flex flex-col gap-4">
35	27	<TextareaControl
36	28	id="draft-ai-image-textarea"
37	29	autoFocus
38	30	placeholder={__(
		@@ -73,8 +65,16 @@
73	65	label={__('Portrait: 3:4', 'extendify-local')}
74	66	value="1024x1536"
75	67	/>
76	68	</ToggleGroupControl>
	69	+
	70	+ <CheckboxControl
	71	+ __nextHasNoMarginBottom
	72	+ // translators: Checkbox that adds a visible "AI Generated" mark onto the image.
	73	+ label={__('Label image as AI-generated', 'extendify-local')}
	74	+ checked={disclose}
	75	+ onChange={setDisclose}
	76	+ />
77	77	</div>
78	78	)}
79	79	{errorMessage.length > 0 && (
80	80	<p className="mb-0 text-red-500">{errorMessage}</p>