function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [image, setImage] = React.useState(''); const handleSendMessage = async ()=>{ if (inputMessage.trim() === '') return; const newMessages = [ ...messages, { role: 'user', content: inputMessage } ]; setMessages(newMessages); setInputMessage(''); setIsLoading(true); try { // ChatGPT for portfolio guidance const chatGPTResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }); const chatGPTData = await chatGPTResponse.json(); if (chatGPTData.status && chatGPTData.choices && chatGPTData.choices.length > 0) { const assistantMessage = chatGPTData.choices[0].message.content; setMessages([ ...newMessages, { role: 'assistant', content: assistantMessage } ]); } // Claude for image generation const claudeResponse = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: '平面図から軸を設定し立体ができる画像を生成してください。' } ] }) }); const claudeData = await claudeResponse.json(); if (claudeData.choices && claudeData.choices.length > 0) { const imageDescription = claudeData.choices[0].message.content; setImage(imageDescription); } } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 p-4 font-sans", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "ポートフォリオサイト作成アシスタント"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto mb-4 bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${message.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block p-2 rounded-lg ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'}`, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, message.content))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), " 処理中..."), image && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "生成された画像の説明:"), /*#__PURE__*/ React.createElement("p", { className: "bg-gray-100 p-2 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, image))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === 'Enter' && handleSendMessage(), placeholder: "ポートフォリオについて質問してください...", className: "flex-grow p-2 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "送信"))); }