function MainComponent({ onSendMessage }) { const [wish, setWish] = React.useState(''); const [trendImage, setTrendImage] = React.useState(null); const [targetImage, setTargetImage] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const handleWishChange = (event)=>{ setWish(event.target.value); }; const handleTrendImageChange = (event)=>{ setTrendImage(event.target.files[0]); }; const handleTargetImageChange = (event)=>{ setTargetImage(event.target.files[0]); }; const handleSubmit = async ()=>{ setIsLoading(true); // Logic for handling the send message would be implemented here // This includes calling the onSendMessage prop with relevant data // which would be handled by the parent component. setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-[#ccccff] rounded-lg shadow-xl space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Psionic Radionics Wish Granting Machine"), /*#__PURE__*/ React.createElement("textarea", { className: "resize-none p-2 w-full h-[100px] border-[#666] border-2 rounded-md font-roboto", placeholder: "Enter your wish here...", value: wish, onChange: handleWishChange, name: "wish", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-[#333] mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Trend Image:", /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleTrendImageChange, className: "ml-2 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-[#333] mr-2", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Target Image:", /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleTargetImageChange, className: "ml-2 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-400 text-white rounded-md hover:bg-blue-500 disabled:opacity-50 font-roboto", onClick: handleSubmit, disabled: isLoading, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, isLoading ? 'Processing...' : 'Submit Wish'))); } function StoryComponent() { const sendMessage = async (messages)=>{ // This function would handle the logic to send message to the backend API via the integration provided. // Example usage of the /CHAT_GPT integration can be implemented here to show different states. }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-5 p-5", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSendMessage: sendMessage, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { onSendMessage: sendMessage, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }), " "); } // Styles for animations and hi tech theme /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 1 }, __self: this }, ` @keyframes pulse-animation { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .pulse-animate { animation: pulse-animation 2s infinite; } `);