function MainComponent({ onSubmit, themeColor = "bg-[#ADD8E6]", buttonColor = "bg-[#B2DFEE]", textColor = "text-[#121212]", responseColors = { ChatGPT: "text-[#585858]", Claude: "text-[#0077b6]" } }) { const [prompt, setPrompt] = React.useState(''); const [responses, setResponses] = React.useState([]); const handleSubmit = async (e)=>{ e.preventDefault(); if (responses.length < 20) { const newResponse = await onSubmit(prompt, responses.length); setResponses((prevResponses)=>[ ...prevResponses, { id: responses.length % 2 === 0 ? 'ChatGPT' : 'Claude', text: newResponse } ]); setPrompt(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${themeColor} rounded-lg p-4`, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: `block font-roboto ${textColor} mb-2`, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "お題:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", id: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: `w-full p-2 font-roboto ${textColor} border border-blue-300 rounded`, disabled: responses.length >= 20, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `mt-4 p-2 w-full ${buttonColor} font-roboto ${textColor} rounded`, disabled: responses.length >= 20, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: `w-full max-w-2xl ${themeColor} rounded-lg p-4`, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `font-roboto ${textColor}`, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "応答："), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, responses.map((res, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${index % 2 === 0 ? "items-start" : "items-end"}`, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `font-roboto ${responseColors[res.id]} rounded px-4 py-2 max-w-xs ${index % 2 === 0 ? "bg-white" : "bg-blue-100"} mb-1`, __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, res.text), /*#__PURE__*/ React.createElement("small", { className: `font-roboto ${index % 2 === 0 ? "ml-2" : "mr-2"}`, __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, res.id))))))); } function StoryComponent() { const handleChatSubmit = async (prompt, step)=>{ const responses = [ [ "The weather is sunny with a slight chance of rain in the afternoon.", "Given the climatic conditions and the current data, there's actually a 30% chance of rain later today." ], [ "Why don't scientists trust atoms? Because they make up everything!", "While humorous, it's essential to understand that atomic theories are core to our understanding of the physical world." ] ]; const responsePair = responses[step % responses.length]; const responseText = responsePair[step % 2]; return new Promise((resolve)=>setTimeout(()=>resolve(responseText || "I'm not certain how to proceed."), 1000)); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleChatSubmit, themeColor: "bg-[#ADD8E6]", buttonColor: "bg-[#B2DFEE]", textColor: "text-[#121212]", responseColors: { ChatGPT: "text-[#585858]", Claude: "text-[#0077b6]" }, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this })); }