function PaperPlaneIcon({ iconClass, iconAlt }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: iconClass, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, iconAlt)); } function PaperPlaneIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PaperPlaneIcon, { iconClass: "fas fa-paper-plane", iconAlt: "Paper plane icon", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (!input.trim()) return; const userMessage = { role: 'user', content: input }; const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); setInput(''); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages }) }); const data = await response.json(); const botMessage = { role: 'assistant', content: data.choices[0].message.content }; const finalMessages = [ ...updatedMessages, botMessage ]; setMessages(finalMessages); setLoading(false); await fetch('/api/db/test-138', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "INSERT INTO `chat_messages` (`role`, `content`) VALUES (?, ?), (?, ?)", values: [ userMessage.role, userMessage.content, botMessage.role, botMessage.content ] }) }); }; const handleInputChange = (e)=>setInput(e.target.value); const handleReload = async ()=>{ setMessages([]); await fetch('/api/db/test-138', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `chat_messages`' }) }); }; React.useEffect(()=>{ const fetchMessages = async ()=>{ const response = await fetch('/api/db/test-138', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'SELECT `role`, `content` FROM `chat_messages`' }) }); const data = await response.json(); setMessages(data || []); }; fetchMessages(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col bg-white w-full max-w-2xl h-full shadow-lg border rounded-lg mt-10", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-grow p-4 space-y-4 overflow-auto", id: "chat-messages", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-end ${message.role === 'user' ? 'justify-start' : 'justify-end'}`, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, message.role === 'user' ? /*#__PURE__*/ React.createElement("img", { src: "/path/to/user-profile.jpg", alt: "User profile icon", className: "w-10 h-10 rounded-full mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: "/path/to/bot-profile.jpg", alt: "Chatbot profile icon", className: "w-10 h-10 rounded-full ml-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `max-w-xs break-words p-4 rounded-lg ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-800'}`, __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 border-t", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: input, onChange: handleInputChange, className: "flex-grow border rounded-l-lg p-3 outline-none", placeholder: "メッセージを入力", disabled: loading, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "p-3 bg-blue-500 text-white rounded-r-lg", disabled: loading, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(PaperPlaneIcon, { iconClass: "fas fa-paper-plane", iconAlt: "Paper plane icon", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: handleReload, className: "mt-4 bg-red-500 text-white p-2 rounded-full border-2 border-red-600", id: "reload-btn", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "リロード")); }