feat: bulk generate modal

alt-text-generator-gpt-vision.php

@@ -70,6 +70,12 @@ private function enqueue_script( string $file_name, array|bool $args = false ):
 		$handle     = "acpl/ai-alt-generator/$file_name";
 		wp_enqueue_script( $handle, ACPL_AI_ALT_PLUGIN_URL . "build/$file_name.js", $asset_file['dependencies'], $asset_file['version'], $args );
 		wp_set_script_translations( $handle, 'alt-text-generator-gpt-vision' );
+
+		foreach ( $asset_file['dependencies'] as $dependency ) {
+			if ( $dependency === 'wp-components' ) {
+				wp_enqueue_style( 'wp-components' );
+			}
+		}
 	}
 
 	private function enqueue_attachment_edit_page_script(): void {

src/media/components/BulkGenerateModal.tsx

@@ -0,0 +1,106 @@
+import { useState } from "@wordpress/element";
+import {
+  Button,
+  Flex,
+  FlexItem,
+  Modal,
+  TextControl,
+  ToggleControl,
+} from "@wordpress/components";
+import { __, _n, _x, sprintf } from "@wordpress/i18n";
+
+export default function BulkGenerateModal({
+  attachment_ids,
+  onClose,
+}: BulkGenerateModalProps) {
+  const [overwriteExisting, setOverwriteExisting] = useState(false);
+  const [customPrompt, setCustomPrompt] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const handleStart = () => {
+    setIsGenerating(true);
+    // start generating alt texts
+  };
+
+  return (
+    <Modal
+      title={__("Generate Alternative Texts", "alt-text-generator-gpt-vision")}
+      onRequestClose={onClose}
+      shouldCloseOnClickOutside={false}
+      shouldCloseOnEsc={!isGenerating}
+    >
+      <ToggleControl
+        label={__(
+          "Overwrite existing alternative texts",
+          "alt-text-generator-gpt-vision",
+        )}
+        help={
+          overwriteExisting
+            ? __(
+                "The existing alternative texts will be overwritten with the new ones.",
+                "alt-text-generator-gpt-vision",
+              )
+            : __(
+                "The existing alternative texts will be preserved.",
+                "alt-text-generator-gpt-vision",
+              )
+        }
+        checked={overwriteExisting}
+        onChange={setOverwriteExisting}
+      />
+      <TextControl
+        label={__(
+          "Additional prompt (optional)",
+          "alt-text-generator-gpt-vision",
+        )}
+        help={__(
+          "Provide additional instructions for AI to tailor the alt text generation, such as including specific keywords for SEO.",
+          "alt-text-generator-gpt-vision",
+        )}
+        placeholder={_x(
+          'e.g. Include terms like "AI", "robotics"',
+          "Additional prompt placeholder",
+          "alt-text-generator-gpt-vision",
+        )}
+        value={customPrompt}
+        onChange={setCustomPrompt}
+      />
+
+      <Flex>
+        <p>
+          {sprintf(
+            _n(
+              "%d image selected",
+              "%d images selected",
+              attachment_ids.length,
+              "alt-text-generator-gpt-vision",
+            ),
+            attachment_ids.length,
+          )}
+        </p>
+
+        <FlexItem>
+          <Flex justify="end">
+            <Button onClick={onClose} isDestructive>
+              {__("Cancel", "alt-text-generator-gpt-vision")}
+            </Button>
+
+            <Button
+              variant="primary"
+              disabled={isGenerating}
+              isBusy={isGenerating}
+              onClick={handleStart}
+            >
+              {__("Start", "alt-text-generator-gpt-vision")}
+            </Button>
+          </Flex>
+        </FlexItem>
+      </Flex>
+    </Modal>
+  );
+}
+
+export type BulkGenerateModalProps = {
+  attachment_ids: number[];
+  onClose: () => void;
+};

src/media/media-upload.tsx

@@ -0,0 +1,46 @@
+import { createRoot, useEffect, useState } from "@wordpress/element";
+import { qs } from "ts-dom-utils";
+import BulkGenerateModal from "./components/BulkGenerateModal";
+import { BULK_ACTION_OPTION_VALUE } from "../constants";
+
+const reactRoot = document.createElement("div");
+reactRoot.id = "acpl-bulk-generate-alts-app";
+document.body.appendChild(reactRoot);
+
+const App = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [selectedMediaIds, setSelectedMediaIds] = useState<number[]>([]);
+
+  useEffect(() => {
+    const form = qs<HTMLFormElement>("form#posts-filter");
+    if (!form) return;
+
+    const listener = (e: SubmitEvent) => {
+      e.preventDefault();
+      const formData = new FormData(form);
+      const action = formData.get("action");
+
+      if (action !== BULK_ACTION_OPTION_VALUE) return;
+
+      const mediaIds = formData.getAll("media[]").map((id) => Number(id));
+      setSelectedMediaIds(mediaIds);
+
+      setIsModalOpen(true);
+    };
+
+    form.addEventListener("submit", listener);
+
+    return () => {
+      form.removeEventListener("submit", listener);
+    };
+  }, []);
+
+  return isModalOpen ? (
+    <BulkGenerateModal
+      attachment_ids={selectedMediaIds}
+      onClose={() => setIsModalOpen(false)}
+    />
+  ) : null;
+};
+
+createRoot(reactRoot).render(<App />);

webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
   entry: {
     "media-modal": "./src/media/media-modal.ts",
     "media-edit-page": "./src/media/media-edit-page.ts",
-    "media-upload": "./src/media/media-upload.ts",
+    "media-upload": "./src/media/media-upload.tsx",
     editor: "./src/editor/index.tsx",
   },
 };