function ChatInterface({ greetingMessage, userPrompt, userResponse, onMessageSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "画像生成AIサイト")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#25D366] text-white flex items-center justify-center", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, "😊"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-2 rounded-lg max-w-xs", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, greetingMessage))), /*#__PURE__*/ React.createElement("div", { className: "flex items-end space-x-2 self-end", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-white p-2 rounded-lg max-w-xs", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, userPrompt)), /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "😊")), /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#25D366] text-white flex items-center justify-center", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "😊"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-2 rounded-lg max-w-xs", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, userResponse))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: onMessageSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "メッセージを入力...", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))))); } function ChatInterfaceStory() { const handleMessageSubmit = (e)=>{ e.preventDefault(); console.log(e.target.message.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { greetingMessage: "こんにちは！どんな画像を生成したいですか？", userPrompt: "お花の画像を生成してください。", userResponse: "もちろん、お花の画像を生成します。", onMessageSubmit: handleMessageSubmit, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleMessageSubmit = (e)=>{ e.preventDefault(); console.log(e.target.message.value); }; return /*#__PURE__*/ React.createElement(ChatInterface, { greetingMessage: "完全無料の画像生成AIサイトへようこそ！どんな画像を生成したいですか？", userPrompt: "お花の画像を生成してください。", userResponse: "もちろん、お花の画像を生成します。", onMessageSubmit: handleMessageSubmit, __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }); }