fix: refresh grid view mode on alt generation complete

includes/AltGenerator.php

@@ -88,7 +88,7 @@ public static function generate_alt_text( int $attachment_id, string $user_promp
 
 		$completion = json_decode( wp_remote_retrieve_body( $api_response ), true );
 
-		if ( $completion['error'] ) {
+		if ( isset( $completion['error'] ) ) {
 			return new WP_Error(
 				$completion['error']['code'],
 				// translators: %s is the error message from OpenAI's API.

src/components/BulkGenerateModal.tsx

@@ -69,6 +69,7 @@ export default function BulkGenerateModal({
 
   const handleStart = async () => {
     setIsGenerating(true);
+    const generateTasks = [];
 
     for (const [id, details] of altGenerationMap) {
       if (!overwriteExisting && details.alt.length > 0) {
@@ -84,8 +85,15 @@ export default function BulkGenerateModal({
           new Map(prevMap.set(id, { ...details, status: "generating" })),
       );
 
-      generateAltText(id, true, customPrompt)
+      const task = generateAltText(id, true, customPrompt)
         .then((alt) => {
+          const attachment = attachments.find(
+            (attachment) => attachment.id === id,
+          );
+          if (attachment) {
+            attachment.alt_text = alt;
+          }
+
           setAltGenerationMap(
             (prevMap) =>
               new Map(
@@ -107,14 +115,19 @@ export default function BulkGenerateModal({
           console.error(error);
         });
 
+      generateTasks.push(task);
+
       // Wait for 1 second before processing the next image to avoid too many requests at once
       // TODO:
       //  Use rate limiting info and implement a better solution
       //  https://platform.openai.com/docs/guides/rate-limits/rate-limits-in-headers
       await sleep(1000);
     }
 
+    await Promise.all(generateTasks);
     setIsGenerating(false);
+
+    document.dispatchEvent(new CustomEvent("altTextsGenerated"));
   };
 
   return (

src/media/extend/extendMediaBulkSelect.js

@@ -52,6 +52,9 @@ export default (onButtonClick) => {
       const selection = this.controller.state().get("selection");
       if (!selection.length) return;
 
+      selection.models[0].set("alt", "dupa");
+      selection.models[0].save();
+
       onButtonClick(selection.models.map((model) => model.id));
     },
   });
@@ -73,6 +76,12 @@ export default (onButtonClick) => {
           priority: -75,
         }).render(),
       );
+
+      document.addEventListener("altTextsGenerated", (event) => {
+        const library = this.controller.state().get("library");
+        library._requery(true);
+        this.controller.trigger("selection:action:done");
+      });
     },
   });
 };

src/media/media-upload.tsx

@@ -11,8 +11,8 @@ const App = () => {
 
   // Grid mode
   useEffect(() => {
-    const listener = (e: CustomEvent<number[]>) => {
-      setSelectedMediaIds(e.detail);
+    const listener = (e: CustomEvent<{ ids: number[] }>) => {
+      setSelectedMediaIds(e.detail.ids);
       setIsModalOpen(true);
     };
 
@@ -66,7 +66,7 @@ domReady(() => {
   extendMediaBulkSelect((ids) => {
     document.dispatchEvent(
       new CustomEvent("triggerBulkAltGenerateModal", {
-        detail: ids,
+        detail: { ids },
       }),
     );
   });

src/types/dom.d.ts

@@ -0,0 +1,6 @@
+declare global {
+  interface DocumentEventMap {
+    triggerBulkAltGenerateModal: { ids: number[] };
+    altTextsGenerated: CustomEvent;
+  }
+}