function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [story, setStory] = React.useState([]); const [userInput, setUserInput] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [streamingMessage, setStreamingMessage] = React.useState(""); const [isStarted, setIsStarted] = React.useState(false); const [genre, setGenre] = React.useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setStory((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setIsLoading(false); } }); const generateFirstPrompt = async (selectedGenre)=>{ setIsLoading(true); setIsStarted(true); setGenre(selectedGenre); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `${selectedGenre}のお話の最初の一文を書いてください。・ひらがなを多く使う・20文字以内・小学生が読みやすい言葉・楽しい展開の始まり` } ], stream: true }) }); handleStreamResponse(response); }; const handleUserInput = (e)=>{ setUserInput(e.target.value); }; const handleAddPhrase = async ()=>{ if (userInput.trim() === "") return; setStory((prev)=>[ ...prev, { role: "user", content: userInput } ]); setUserInput(""); setIsLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `お友達の言葉から次の一文を考えてください。・ひらがなを使う・8文字以内・やさしい言葉・${genre}の要素を入れる・楽しい展開にする` }, ...story.map((msg)=>({ role: msg.role, content: msg.content })), { role: "user", content: userInput } ], stream: true }) }); handleStreamResponse(response); }; const handleEndStory = async ()=>{ setIsLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `お友達と一緒に作ったお話の最後の一文を考えてください。・ひらがなを使う・8文字以内・やさしい言葉・${genre}の要素を入れる・ハッピーエンドにする` }, ...story.map((msg)=>({ role: msg.role, content: msg.content })), { role: "user", content: "おしまいにしよう！" } ], stream: true }) }); handleStreamResponse(response); }; const handleBack = ()=>{ setIsStarted(false); setStory([]); setUserInput(""); setStreamingMessage(""); setGenre(""); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#C1BFF9] to-[#7EE7D6] min-h-screen p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full max-w-[600px] mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-poppins text-black text-3xl", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "お話し連想ゲーム"), isStarted && /*#__PURE__*/ React.createElement(StylishButton, { text: "戻る", color: "teal", icon: "fa-arrow-left", onClick: handleBack, __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this })), !isStarted ? /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/30 backdrop-blur-sm rounded-[12px] p-8 mb-8", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-poppins text-black text-4xl mb-6 animate-bounce", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "✨ お話を作ろう! ✨"), /*#__PURE__*/ React.createElement("p", { className: "font-poppins text-black text-xl", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "どんなお話にする？")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-6 mb-4", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "transform hover:scale-105 transition-transform duration-200", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "冒険物語", color: "yellow", icon: "fa-compass", onClick: ()=>generateFirstPrompt("冒険"), __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "transform hover:scale-105 transition-transform duration-200", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "ミステリー", color: "purple", icon: "fa-magnifying-glass", onClick: ()=>generateFirstPrompt("ミステリー"), __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "transform hover:scale-105 transition-transform duration-200", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "ファンタジー", color: "teal", icon: "fa-wand-sparkles", onClick: ()=>generateFirstPrompt("ファンタジー"), __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this })))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-white border-2 border-black rounded-[6px] w-full max-w-[600px] p-4 mb-4 min-h-[200px]", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, story.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `font-poppins text-black mb-3 p-2 rounded-[6px] ${msg.role === "assistant" ? "bg-[#7EE7D6]" : "bg-[#F8E44F]"}`, __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${msg.role === "assistant" ? "fa-robot" : "fa-child"} mr-2`, __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }), msg.content)), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "font-poppins text-black mb-3 p-2 rounded-[6px] bg-[#7EE7D6]", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-2", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }), streamingMessage)), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userInput, name: "userInput", onChange: handleUserInput, disabled: isLoading, className: "font-poppins border-2 border-black rounded-[6px] px-4 py-2 mb-4 w-full", placeholder: "つぎのお話を書いてね！", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: isLoading ? "考え中..." : "つづきを書く", color: "yellow", icon: isLoading ? "fa-spinner fa-spin" : "fa-plus", onClick: handleAddPhrase, disabled: isLoading || userInput.trim() === "", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "おしまい", color: "purple", icon: "fa-flag-checkered", onClick: handleEndStory, disabled: isLoading, __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-bounce { animation: bounce 2s infinite; } `)); }