function MainComponent() { const [artwork, setArtwork] = useState({ title: "", artist: "", year: "", medium: "", dimensions: "", condition: "", imageUrl: "" }); const [description, setDescription] = useState(""); const [loadingState, setLoadingState] = useState("idle"); const [error, setError] = useState(null); const [retryCount, setRetryCount] = useState(0); const [upload, { loading: uploading }] = useUpload(); const [showDraft, setShowDraft] = useState(false); const [editedDescription, setEditedDescription] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setDescription(message); setEditedDescription(message); setShowDraft(true); setLoadingState("idle"); setRetryCount(0); setStreamingMessage(""); } }); const handleRetry = useCallback(()=>{ setLoadingState("idle"); setError(null); generateDescription(); }, []); const generateDescription = useCallback(async ()=>{ if (loadingState === "generating") return; setLoadingState("generating"); setError(null); try { const prompt = `Create a sophisticated auction house catalog description for: "${artwork.title}" by ${artwork.artist}, ${artwork.year} Medium: ${artwork.medium} Dimensions: ${artwork.dimensions} Condition: ${artwork.condition} Format the response in clear paragraphs with two line breaks between sections. Start with the title in capital letters.`; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } handleStreamResponse(response); } catch (err) { console.error("Generation error:", err); setError(`Failed to generate description: ${err.message}`); setLoadingState("error"); setRetryCount((prev)=>prev + 1); } }, [ artwork, loadingState, handleStreamResponse ]); const handleImageUpload = async (e)=>{ if (e.target.files) { setLoadingState("uploading"); setError(null); try { const { url, error } = await upload({ file: e.target.files[0] }); if (error) throw new Error(error); setArtwork((prev)=>({ ...prev, imageUrl: url })); setLoadingState("idle"); } catch (err) { setError(`Failed to upload image: ${err.message}`); setLoadingState("error"); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-black p-4 shadow-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-crimson-text text-2xl", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Chiaro"), /*#__PURE__*/ React.createElement("a", { href: "/demo", className: "text-white hover:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Try Demo"))), /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-8 text-[#1a1a1a]", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Fine Art Catalog Description Generator"), !showDraft ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors cursor-pointer bg-gray-50", onDragOver: (e)=>{ e.preventDefault(); e.stopPropagation(); }, onDrop: async (e)=>{ e.preventDefault(); e.stopPropagation(); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setArtwork((prev)=>({ ...prev, imageUrl: url })); } }, onClick: ()=>document.getElementById("fileInput").click(), __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "fileInput", type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden", __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }, artwork.imageUrl ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 141, columnNumber: 25 }, __self: this }, "Click or drag to replace image") : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 144, columnNumber: 27 }, __self: this }, "Drop your image here"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 145, columnNumber: 27 }, __self: this }, "or click to browse")))), artwork.imageUrl && /*#__PURE__*/ React.createElement("img", { src: artwork.imageUrl, alt: "Artwork preview", className: "w-full rounded-lg mt-4 object-cover", __source: { fileName: "", lineNumber: 153, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Artwork Title", name: "title", value: artwork.title, onChange: (e)=>setArtwork((prev)=>({ ...prev, title: e.target.value })), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Artist Name", name: "artist", value: artwork.artist, onChange: (e)=>setArtwork((prev)=>({ ...prev, artist: e.target.value })), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Year", name: "year", value: artwork.year, onChange: (e)=>setArtwork((prev)=>({ ...prev, year: e.target.value })), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 185, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Medium", name: "medium", value: artwork.medium, onChange: (e)=>setArtwork((prev)=>({ ...prev, medium: e.target.value })), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Dimensions", name: "dimensions", value: artwork.dimensions, onChange: (e)=>setArtwork((prev)=>({ ...prev, dimensions: e.target.value })), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "condition", value: artwork.condition, onChange: (e)=>setArtwork((prev)=>({ ...prev, condition: e.target.value })), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 221, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 232, columnNumber: 21 }, __self: this }, "Select Condition"), /*#__PURE__*/ React.createElement("option", { value: "Excellent", __source: { fileName: "", lineNumber: 233, columnNumber: 21 }, __self: this }, "Excellent"), /*#__PURE__*/ React.createElement("option", { value: "Very Good", __source: { fileName: "", lineNumber: 234, columnNumber: 21 }, __self: this }, "Very Good"), /*#__PURE__*/ React.createElement("option", { value: "Good", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, "Good"), /*#__PURE__*/ React.createElement("option", { value: "Fair", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }, "Fair")))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateDescription, disabled: loadingState === "generating" || loadingState === "uploading" || !artwork.title || !artwork.artist, className: `mt-8 px-6 py-3 rounded font-inter relative ${loadingState === "generating" ? "bg-gray-400" : loadingState === "error" ? "bg-red-600 hover:bg-red-700" : "bg-[#1a1a1a] hover:bg-[#333]"} text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 min-w-[200px] justify-center`, __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, loadingState === "generating" && /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 flex items-center", __source: { fileName: "", lineNumber: 259, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 260, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }, loadingState === "generating" ? "Generating..." : loadingState === "uploading" ? "Uploading..." : loadingState === "error" ? "Try Again" : "Generate Description"), loadingState === "error" && /*#__PURE__*/ React.createElement("span", { className: "ml-1 text-sm", __source: { fileName: "", lineNumber: 273, columnNumber: 21 }, __self: this }, "(", retryCount, ")")))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "Draft Description"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDraft(false), className: "text-[#1a1a1a] hover:text-[#333] font-inter", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, "Back to Form")), artwork.imageUrl && /*#__PURE__*/ React.createElement("img", { src: artwork.imageUrl, alt: "Artwork", className: "w-full max-h-[400px] object-contain rounded-lg mb-6", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] p-4 border rounded font-crimson-text overflow-auto whitespace-pre-wrap", contentEditable: true, onInput: (e)=>setEditedDescription(e.currentTarget.textContent), suppressContentEditableWarning: true, __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, editedDescription), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-4", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditedDescription(description), className: "px-4 py-2 border border-[#1a1a1a] text-[#1a1a1a] rounded hover:bg-[#f5f5f5] font-inter", __source: { fileName: "", lineNumber: 309, columnNumber: 17 }, __self: this }, "Reset"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDescription(editedDescription), className: "px-4 py-2 bg-[#1a1a1a] text-white rounded hover:bg-[#333] font-inter", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, "Save Changes"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-lg", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 328, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-600", __source: { fileName: "", lineNumber: 329, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-red-600 font-medium", __source: { fileName: "", lineNumber: 330, columnNumber: 19 }, __self: this }, error)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setLoadingState("idle"); setError(null); }, className: "text-red-600 hover:text-red-700 font-inter", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleRetry, className: "mt-2 text-red-600 hover:text-red-700 text-sm flex items-center gap-1 font-inter", __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo-alt", __source: { fileName: "", lineNumber: 346, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, "Try again")))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 flex items-center gap-2 bg-white p-3 rounded-lg shadow-lg transition-all duration-300", style: { transform: loadingState !== "idle" ? "translateY(0)" : "translateY(100px)", opacity: loadingState !== "idle" ? 1 : 0 }, __source: { fileName: "", lineNumber: 352, columnNumber: 9 }, __self: this }, loadingState !== "idle" && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin text-[#1a1a1a]", __source: { fileName: "", lineNumber: 363, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[#1a1a1a] rounded-full animate-ping", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-crimson-text whitespace-nowrap", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }, loadingState === "generating" ? "Crafting your description..." : loadingState === "uploading" ? "Preparing your image..." : "Working on it..."))))); }