function JapaneseChatInterface({ messages, input, setInput, handleSubmit, loading }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-white rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto font-semibold mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "GPT-4チャット"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-${message.role === 'user' ? '[#cfe3ff]' : '[#eaeaea]'} p-4 rounded-lg mb-2`, __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, message.content))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", rows: "4", value: input, onChange: (e)=>setInput(e.target.value), className: "w-full p-2 border border-gray-300 rounded-lg mb-4 focus:outline-none", placeholder: "メッセージを入力してください...", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, loading ? "送信中..." : "送信")))); } function JapaneseChatInterfaceStory() { const [messages, setMessages] = React.useState([ { role: 'assistant', content: 'こんにちは！' }, { role: 'user', content: 'こんにちは、GPT-4！' } ]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); setLoading(true); setTimeout(()=>{ setMessages([ ...messages, { role: 'user', content: input } ]); setInput(''); setLoading(false); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseChatInterface, { messages: messages, input: input, setInput: setInput, handleSubmit: handleSubmit, loading: loading, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "こんにちは！" } ]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSubmit = (event)=>{ event.preventDefault(); if (!input.trim()) return; const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setInput(""); setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }).then((response)=>response.json()).then((data)=>{ const responseMessage = data.choices[0].message.content; setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: responseMessage } ]); }).catch((error)=>console.error('Error:', error)).finally(()=>setLoading(false)); }; return /*#__PURE__*/ React.createElement(JapaneseChatInterface, { messages: messages, input: input, setInput: setInput, handleSubmit: handleSubmit, loading: loading, __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }); }