use-vibes/dist/components/PromptBar.js

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

import * as React from 'react';
import { combineClasses, defaultClasses } from '../utils/style-utils';
/**
 * PromptBar component - Displays and allows editing of the prompt text
 */
export function PromptBar({ promptText, editedPrompt, setEditedPrompt, handlePromptEdit, classes = defaultClasses, }) {
    return (React.createElement("div", { className: "imggen-top-line" },
        React.createElement("div", { className: combineClasses('imggen-prompt', classes.prompt) }, editedPrompt !== null ? (React.createElement("input", { type: "text", value: editedPrompt, onChange: (e) => setEditedPrompt(e.target.value), onKeyDown: (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    handlePromptEdit(editedPrompt);
                }
                else if (e.key === 'Escape') {
                    setEditedPrompt(null); // Exit edit mode
                }
            }, 
            // Removed onBlur handler to prevent edit mode from being exited when clicking buttons
            autoFocus: true, className: "imggen-prompt-input imggen-edit-mode", "aria-label": "Edit prompt" })) : (React.createElement("div", { onClick: () => {
                // Enter edit mode on single click
                setEditedPrompt(promptText);
            }, className: "imggen-prompt-text imggen-truncate", title: "Click to edit prompt" }, promptText)))));
}
//# sourceMappingURL=PromptBar.js.map