function MainComponent() { const [theme, setTheme] = React.useState(''); const [comments, setComments] = React.useState([]); const [loading, setLoading] = React.useState(false); const [order, setOrder] = React.useState([ 'A', 'B', 'C', 'A', 'B', 'C', 'D' ]); const participantIndex = React.useRef(0); const fetchComments = async (currentTheme, allComments)=>{ const participant = order[participantIndex.current]; let integration, prompt; if (participantIndex.current >= order.length) { setLoading(false); return; } switch(participant){ case 'A': integration = '/integrations/chat-gpt/conversationgpt4'; prompt = `あなたは独創的なデザイナーです。クリエイティブなアイデアを発言してください。${currentTheme}及び${allComments}の内容を踏まえて建設的な意見を述べてください。300文字以内で発言してください。`; break; case 'B': integration = '/integrations/google-gemini-1-5/'; prompt = `あなたはイノベーティブなエンジニアです。新しいテクノロジーを踏まえた意見を発言してください。${currentTheme}及び${allComments}の内容を踏まえて建設的な意見を述べてください。300文字以内で発言してください。`; break; case 'C': integration = '/integrations/chat-gpt/conversationgpt4'; prompt = `あなたは世の中のニーズや課題に詳しい事業開発者です。世の中のニーズや課題に注目して発言をして下さい。${currentTheme}及び${allComments}の内容を踏まえて建設的な意見を述べてください。300文字以内で発言してください。`; break; case 'D': integration = '/integrations/anthropic-claude/'; prompt = `あなたは議論のまとめ役です。${currentTheme}及び${allComments}を踏まえてチームの結論を作成ください。結論と概要を分かりやすく整理ください。`; break; } if (integration && prompt) { setLoading(true); const response = await fetch(integration, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: prompt } ] }) }); const result = await response.json(); setComments((prevComments)=>[ ...prevComments, { role: participant, content: result.choices[0].message.content } ]); setLoading(false); } participantIndex.current += 1; }; const startBrainstorming = ()=>{ setComments([]); participantIndex.current = 0; fetchComments(theme, ''); }; const handleChangeTheme = (event)=>{ setTheme(event.target.value); }; React.useEffect(()=>{ if (theme && comments.length < order.length) { const allComments = comments.map((comment)=>comment.content).join(' '); fetchComments(theme, allComments); } }, [ comments, theme ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen p-4 items-center bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "theme", type: "text", placeholder: "議論のテーマを入力してください", className: "w-full p-2 border-2 border-gray-300 rounded mb-4", value: theme, onChange: handleChangeTheme, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded mb-6", onClick: startBrainstorming, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "ブレスト開始"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full max-w-7xl h-full overflow-auto bg-white", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, comments.map((comment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex flex-col mb-4 p-3 rounded-lg shadow ${comment.role === 'A' ? 'bg-[#FFC0CB]' : comment.role === 'B' ? 'bg-[#ADD8E6]' : comment.role === 'C' ? 'bg-[#90EE90]' : 'bg-[#FFFFE0]'}`, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, comment.role === 'A' ? 'クリエイティブなデザイナー:' : comment.role === 'B' ? 'イノベーティブなエンジニア:' : comment.role === 'C' ? '事業開発:' : 'まとめ役:'), /*#__PURE__*/ React.createElement("span", { className: "mt-1 text-gray-700", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, comment.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center my-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin text-3xl text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-lg animate-blink", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "生成中..."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, ` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .animate-blink { animation: blink 1s linear infinite; } `)); }