integratedhub/islands/AsyncImageGenerater.tsx

// islands/AsyncImageGenerater.tsx
import { useState } from "preact/hooks";
import { ImageFile } from "../utils/types.ts";
import ImageGenerater from "./ImageGenerater.tsx";

export function AsyncImageGenerater() {
  const [popup, setPopup] = useState<
    {
      imageFile: ImageFile;
      role: string;
      resolve: (value: ImageFile | null) => void;
    } | null
  >(null);

  // Show the popup and return a Promise for the answer
  const imageGenerate = (
    imageFile: ImageFile,
    role: string,
  ): Promise<ImageFile | null> => {
    return new Promise((resolve) => {
      setPopup({ imageFile, role, resolve });
    });
  };

  // Render the popup if needed
  // Priority for text_1: image_text (user's description) > image_file (sanitized filename)
  // image_text preserves the user's original typed description with spaces/casing
  // image_file is the sanitized filename with underscores and timestamp
  const popupImageGenerater = popup
    ? (
      <ImageGenerater
        text_1={popup.imageFile.image_text || popup.imageFile.image_file || ""}
        image_data={popup.imageFile.image_data}
        role={popup.role}
        recordingCallback={(answer: ImageFile | null) => {
          popup.resolve(answer);
          setPopup(null);
        }}
      />
    )
    : null;

  return [imageGenerate, popupImageGenerater] as const;
}