function MainComponent() { const [currentTopic, setCurrentTopic] = useState(null); const [isSpinning, setIsSpinning] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [messages, setMessages] = useState([]); const [showExplanation, setShowExplanation] = useState(false); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setIsSpinning(false); } }); const generateTopic = async ()=>{ setIsSpinning(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: '以下のカテゴリーから、様々な深さの質問を1つ生成してください。気軽に答えられる質問から、少し考えさせられる質問まで、バランスよく生成してください：\n\n1. 日常の発見と共有\n- 最近の小さな発見\n- 今日あった出来事\n- お気に入りの場所や物\n- 食べ物の好み\n- 休日の過ごし方\n- 季節の楽しみ方\n- 最近の嬉しかった瞬間\n- 明日の予定\n\n2. 趣味と好奇心\n- 没頭していること\n- 新しく始めたいこと\n- 興味のある分野\n- おすすめの娯楽\n- 最近知った面白い情報\n- チャレンジしてみたいこと\n- インスピレーションの源\n- 夢中になれるもの\n\n3. 生活の知恵とコツ\n- 時短テクニック\n- ストレス解消法\n- 便利な道具やアプリ\n- 整理整頓のコツ\n- 習慣づけの工夫\n- 効率化のヒント\n- 健康管理の秘訣\n- お金の使い方\n\n4. 価値観と人生観\n- 大切にしていること\n- 人生の転機\n- 将来の夢\n- 幸せの定義\n- 成功の基準\n- 理想の生活\n- 挑戦したいこと\n- 変えたいこと\n\n5. 思考実験と想像\n- もし〜だったら\n- 選択の質問\n- 仮想シナリオ\n- 未来予測\n- 面白い仮説\n- 心理クイズ\n- 倫理的な選択\n- 想像の冒険\n\n6. 人間関係と社会\n- コミュニケーションの工夫\n- 思い出の人々\n- 影響を受けた出来事\n- 社会への興味\n- 文化や習慣\n- 世代間の違い\n- つながりの作り方\n- 共感できる経験\n\n回答は以下のJSON形式で返してください：\n{\n "main_category": "メインカテゴリー",\n "sub_category": "サブカテゴリー",\n "question": "質問内容",\n "difficulty": "答えやすさレベル（1-5）"\n}' } ], json_schema: { name: "topic_generator", schema: { type: "object", properties: { main_category: { type: "string" }, sub_category: { type: "string" }, question: { type: "string" }, difficulty: { type: "number" } }, required: [ "main_category", "sub_category", "question", "difficulty" ], additionalProperties: false } } }) }); const data = await response.json(); const result = JSON.parse(data.choices[0].message.content); setCurrentTopic(result); setIsSpinning(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a2e] text-white font-roboto p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-[#ffd700] mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "🎲 トークルーレット 🎲"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a3e] rounded-lg p-8 shadow-lg relative overflow-hidden", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `transform transition-all duration-1000`, style: { animation: isSpinning ? "spin 2s ease-out" : "none" }, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, currentTopic ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd700] text-xl mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, currentTopic.main_category), /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd700] text-lg mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, currentTopic.sub_category), /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, currentTopic.question)) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-xl text-gray-400", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "ルーレットを回して話題を選びましょう！"))), currentTopic && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowExplanation(!showExplanation), className: "text-[#ffd700] underline cursor-pointer hover:text-[#ffed4a]", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, showExplanation ? "解説を隠す" : "解説を見る"), showExplanation && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-[#2a2a3e] rounded-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd700] text-lg mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "💡 解説・ポイント"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-200", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, currentTopic.main_category === "価値観と性格の探求" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 104, columnNumber: 23 }, __self: this }, "自己理解と成長のきっかけとなる質問です。率直に答えることで、新たな気づきが得られるかもしれません。")), currentTopic.main_category === "季節と暮らしの発見" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 111, columnNumber: 23 }, __self: this }, "日常の中の小さな発見や季節ならではの体験を共有することで、生活をより豊かにするヒントが見つかるかもしれません。")), currentTopic.main_category === "実践的な知恵の共有" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }, "具体的な工夫やアイデアを出し合うことで、より効率的で充実した生活のヒントが得られるかもしれません。")), currentTopic.main_category === "思考を深める対話" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }, "正解のない問いについて考えることで、新しい視点や気づきが得られるかもしれません。"))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateTopic, disabled: isSpinning, className: ` bg-[#ffd700] text-[#1a1a2e] px-8 py-4 rounded-full text-xl font-bold transform transition-all hover:bg-[#ffed4a] ${isSpinning ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} `, style: { animation: isSpinning ? "bounce 0.5s infinite" : "none" }, __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, isSpinning ? "ルーレット回転中..." : "ルーレットを回す"))), /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 pointer-events-none opacity-10", style: { backgroundImage: "url('https://ucarecdn.com/21da5e98-cbbc-44b1-80f5-c0c101d8f7ad/-/format/auto/')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", filter: "blur(8px)", zIndex: -1 }, __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } `)); }