function MainComponent() { const [chatInput, setChatInput] = React.useState(''); const [responses, setResponses] = React.useState([]); const philosophers = [ { name: 'ソクラテス', identifier: 'socrates' }, { name: 'ニーチェ', identifier: 'nietzsche' }, { name: 'カント', identifier: 'kant' }, { name: 'コンフュージアス', identifier: 'confucius' } ]; const handleSubmit = async (e)=>{ e.preventDefault(); if (!chatInput.trim()) return; const chatResponses = await Promise.all(philosophers.map(async (philosopher)=>{ const response = await fetchAIResponse(chatInput, philosopher.identifier); return { ...philosopher, response: response.message }; })); setResponses(chatResponses); }; const fetchAIResponse = async (input, philosopher)=>{ const response = await fetch(`https://example.ai/api/chat`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ input, philosopher }) }); return response.json(); }; const navigateToChat = (philosopher)=>{ const philosopherChatURL = `/chat/${philosopher}`; // Assume navigating function exists navigate(philosopherChatURL); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center text-[#333]", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "哲学者チャット"), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: (e)=>setChatInput(e.target.value), placeholder: "何を知りたいですか？", className: "w-full p-3 border-2 border-gray-200 rounded-md focus:outline-none focus:border-blue-400", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), responses.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, responses.map((response)=>/*#__PURE__*/ React.createElement("div", { key: response.identifier, className: "p-4 bg-[#eceff1] rounded-lg flex items-center space-x-3 cursor-pointer hover:bg-[#CFD8DC]", onClick: ()=>navigateToChat(response.identifier), __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, response.name, ": ", response.response)))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, philosophers.map((philosopher)=>/*#__PURE__*/ React.createElement("div", { key: philosopher.identifier, className: "p-4 bg-[#eceff1] rounded-lg flex items-center space-x-3 cursor-pointer hover:bg-[#CFD8DC]", onClick: ()=>navigateToChat(philosopher.identifier), __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa fa-user-${philosopher.identifier === 'confucius' ? 'graduate' : philosopher.identifier === 'socrates' ? 'secret' : philosopher.identifier === 'nietzsche' ? 'ninja' : 'tie'} text-3xl text-[#607D8B]`, __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, philosopher.name))))))); }