function MainComponent({ messages }) { const [userInput, setUserInput] = React.useState(''); const [chatMessages, setChatMessages] = React.useState(messages || []); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleSendMessage = async ()=>{ if (userInput.trim()) { const newUserMessage = { type: 'user', content: userInput.trim() }; setChatMessages([ ...chatMessages, newUserMessage ]); setIsLoading(true); const response = await fetch('/integrations/dall-e-3/?prompt=' + encodeURIComponent(userInput.trim()), { method: 'GET' }); const responseData = await response.json(); const imageContent = responseData.data[0]; const assistantMessage = { type: 'bot', content: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: imageContent, alt: `リヴ画伯による「${userInput.trim()}」の画像生成結果`, className: "w-full max-w-[400px] h-auto rounded-lg shadow-md mx-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })) }; setChatMessages((currentMessages)=>[ ...currentMessages, assistantMessage ]); setIsLoading(false); setUserInput(''); } }; const renderMessages = chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 rounded-lg shadow-md max-w-[70%] bg-white", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, typeof message.content === 'string' ? message.content : message.content))); return /*#__PURE__*/ React.createElement("div", { className: "font-noto-sans w-full max-w-[800px] mx-auto bg-cover bg-center min-h-screen flex flex-col", style: { backgroundImage: "url('https://ucarecdn.com/1a9c4007-4313-4ded-9420-274943076625/-/format/auto/')" }, __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-6 bg-gradient-to-r from-[#1982FC] to-[#19D3AE] text-white", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "リヴ画伯による簡単画像生成AI🎨🐺✨"), /*#__PURE__*/ React.createElement("a", { href: "https://kawamura-id.com", className: "text-xs underline", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "powered by ", /*#__PURE__*/ React.createElement("span", { className: "underline", __source: { fileName: "", lineNumber: 50, columnNumber: 126 }, __self: this }, "有限会社河村工業"))), /*#__PURE__*/ React.createElement("div", { className: "chat-container p-6 flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, renderMessages, isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 italic", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white bg-black inline-block px-2 py-1 rounded animate-pulse", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "リヴ画伯が頑張って絵を描いています🎨"))), /*#__PURE__*/ React.createElement("div", { className: "controls p-4 bg-white bg-opacity-80 border-t border-gray-200 flex items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-1 p-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-[#1982FC]", placeholder: "メッセージを入力...", name: "userInput", value: userInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-3 p-2 bg-[#1982FC] text-white rounded-full focus:outline-none hover:bg-[#1975E0] transition-colors duration-300", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })))); } function StoryComponent() { const initialMessages = [ { type: 'bot', content: 'こんにちは🐺✨俺は有限会社河村工業の対話型AI「RivAI（リヴァイ）」だぜ🐺‼️今回はリヴ画伯として頑張って画像を生成してみるぜ♪' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { messages: initialMessages, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this })); }