Edit card

import { useState } from "react";
import {
  Composer,
  EditCard,
  EDIT_IMAGE_USE_CASE,
  createFalEngine,
  useComposer,
  type ComposerAttachment,
} from "@chai-ui/react";

const engine = createFalEngine({ outputKind: "image" });

export function ImageEditor() {
  const [value, setValue] = useState("");
  const [attachments, setAttachments] = useState<ComposerAttachment[]>([]);
  const editImage = attachments.find((a) => a.kind === "image") ?? null;
  const { submit, cancel, edit } = useComposer({ engine, editImage });
  const busy = edit?.versions.some((v) => v.status === "queued" || v.status === "running") ?? false;

  return (
    <>
      {edit && <EditCard {...edit} />}
      <Composer
        value={value}
        onChange={setValue}
        attachments={attachments}
        onAttachmentsChange={setAttachments}
        useCase={EDIT_IMAGE_USE_CASE}
        regions={edit?.regions}
        onRegionsChange={edit?.onRegionsChange}
        onSubmit={submit}
        submitting={busy}
        onAbort={cancel}
      />
    </>
  );
}