function SendButton({ onClick, label }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "w-full p-4 bg-blue-500 text-white rounded font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function SendButtonStory() { const sendMessage = ()=>{ alert('メッセージが送信されました'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SendButton, { onClick: sendMessage, label: "送信", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [message, setMessage] = React.useState(''); const [chat, setChat] = React.useState([]); const [imageUrl, setImageUrl] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/dall-e-3/?prompt=strong+muscular+man', { method: 'GET' }).then((response)=>response.json()).then((data)=>setImageUrl(data.data[0])); }, []); const handleSendMessage = ()=>{ const newMessage = { role: 'user', content: message }; const updatedChat = [ ...chat, newMessage ]; setChat(updatedChat); setMessage(''); fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedChat }) }).then((response)=>response.json()).then((data)=>{ const reply = { role: 'assistant', content: data.choices[0].message.content }; setChat([ ...updatedChat, reply ]); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 w-full font-sans", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px]", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Strong muscular man", className: "w-full h-auto mb-4 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 w-full p-4 rounded shadow-md mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, chat.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 p-2 rounded ${msg.role === 'user' ? 'bg-blue-200 text-left' : 'bg-green-200 text-right'}`, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, msg.content))), /*#__PURE__*/ React.createElement("input", { type: "text", value: message, onChange: (e)=>setMessage(e.target.value), name: "message", className: "w-full p-2 mb-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(SendButton, { onClick: handleSendMessage, label: "送信", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }))); }