use-vibes/dist/components/ImgGenUtils/ImgGenPromptWaiting.js

Transform any DOM element into an AI-powered micro-app

import * as React from 'react';
import '../ImgGen.css';
import { combineClasses, defaultClasses } from '../../utils/style-utils';
import { ImgGenFileDrop } from './ImgGenFileDrop';
import { useFireproof } from 'use-fireproof';
// Component for when neither prompt nor _id is provided
export function ImgGenPromptWaiting({ className, classes = defaultClasses, database, debug, onFilesUploaded, }) {
    const { database: db } = useFireproof(database || 'ImgGen');
    // Handle files being uploaded
    const handleFilesDropped = React.useCallback(async (files) => {
        if (!files.length)
            return;
        if (debug) {
            console.log(`[ImgGenPromptWaiting] Handling ${files.length} dropped files`);
        }
        try {
            // Create new document to hold the uploaded files
            const newDoc = {
                type: 'image',
                createdAt: new Date().toISOString(),
                _files: {},
            };
            // Add files to the document with input file keys
            files.forEach((file, index) => {
                // Input files are prefixed with 'in' followed by a number
                // These are files uploaded by the user, not generated by AI
                newDoc._files[`in${index + 1}`] = file;
            });
            // Save the document to get an ID
            const result = await db.put(newDoc);
            if (debug) {
                console.log('[ImgGenPromptWaiting] Created document for uploads:', result.id);
            }
            // Notify parent component that files were uploaded
            if (onFilesUploaded && result.id) {
                onFilesUploaded(result.id);
            }
        }
        catch (error) {
            console.error('[ImgGenPromptWaiting] Error handling file upload:', error);
        }
    }, [db, debug, onFilesUploaded]);
    return (React.createElement("div", { className: combineClasses('imggen-upload-waiting', className || '', classes?.uploadWaiting || '') },
        React.createElement("div", { className: "imggen-placeholder-content", style: { marginBottom: '1rem', textAlign: 'center' } },
            React.createElement("h3", { style: { margin: '0 0 0.5rem 0', color: '#333' } }, "Generate an Image"),
            React.createElement("p", { style: { margin: '0', color: '#666' } }, "Enter a prompt or upload an image to edit")),
        React.createElement(ImgGenFileDrop, { className: classes?.dropZone || '', onFilesDropped: handleFilesDropped, isActive: true, maxFiles: 10, debug: debug, addFilesMessage: "Drop images here to upload (or click to browse)" })));
}
//# sourceMappingURL=ImgGenPromptWaiting.js.map