function MainComponent() { const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const messageRef = React.useRef(); const sendMessage = async ()=>{ const messageContent = messageRef.current.value; if (!messageContent.trim()) return; const newMessage = { role: 'user', content: messageContent }; setMessages([ ...messages, newMessage ]); setLoading(true); const responses = await Promise.all([ fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newMessage ], system_prompt: '友達と話しているように' }) }).then((res)=>res.json()), fetch('/integrations/google-gemini/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newMessage ] }) }).then((res)=>res.json()), fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newMessage ] }) }).then((res)=>res.json()) ]); const aiMessages = responses.map((response, index)=>({ role: [ 'chat-gpt', 'google-gemini', 'anthropic-claude' ][index], content: response.choices[0].message.content })); setMessages([ ...messages, newMessage, ...aiMessages ]); messageRef.current.value = ''; setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto my-4 p-4 bg-green-100 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-3", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-green-800", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "AI LINE")), /*#__PURE__*/ React.createElement("div", { className: "h-[500px] overflow-y-auto bg-white rounded-lg p-3", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-${message.role === 'user' ? 'end justify-end' : 'start'} mb-2`, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${{ 'chat-gpt': 'fas fa-robot text-green-500', 'google-gemini': 'fab fa-google text-red-500', 'anthropic-claude': 'fas fa-spa text-purple-500', 'user': 'fas fa-user-circle text-blue-500' }[message.role]} text-3xl`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `${message.role === 'user' ? 'bg-blue-100' : message.role === 'chat-gpt' ? 'bg-green-100' : message.role === 'google-gemini' ? 'bg-red-100' : 'bg-purple-100'} rounded-lg px-4 py-2 mx-2`, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, message.content)))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, "読み込み中...")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", ref: messageRef, name: "message", placeholder: "メッセージを入力...", className: "w-full p-3 rounded-lg outline-none border-2 border-green-200", onKeyDown: (e)=>e.key === 'Enter' && sendMessage(), __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }))); }