function MainComponent() { const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [userMessage, setUserMessage] = React.useState(""); const [audioMessage, setAudioMessage] = React.useState(null); const sendMessage = async (event)=>{ event.preventDefault(); if (!userMessage.trim() && !audioMessage) return; const newMessages = [ ...messages, { role: "user", content: userMessage } ]; setMessages(newMessages); setUserMessage(""); setLoading(true); let transcribedText = userMessage; if (audioMessage) { const audioResponse = await fetch("/integrations/transcribe-audio-2/listen", { method: "POST", headers: { "Content-Type": audioMessage.type }, body: audioMessage }); const audioData = await audioResponse.json(); transcribedText = audioData.results.channels[0].alternatives[0].transcript; } const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, { role: "user", content: transcribedText } ] }) }); const data = await response.json(); const replyContent = data.choices[0].message.content.split('. ').slice(0, 3).join('. '); const assistantMessage = transcribedText.match(/[^\x00-\x7F]+/) ? `こちらBlue Eagle、${replyContent}` : `This is Blue Eagle. ${replyContent}`; setMessages([ ...newMessages, { role: "assistant", content: assistantMessage } ]); setLoading(false); setAudioMessage(null); }; const handleAudioUpload = (event)=>{ setAudioMessage(event.target.files[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-cover bg-center h-screen p-4 font-roboto text-white", style: { backgroundImage: "url('/images/ship-background.jpg')" }, __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#01010180] w-full max-w-[600px] rounded-lg shadow-2xl p-6 flex flex-col space-y-4 overflow-hidden backdrop-blur-md", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "AI 無線チャットボット"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto space-y-4 bg-[#ffffff40] p-4 rounded-lg backdrop-blur-md", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, messages.map((message, index)=>{ const textAlignClass = message.role === "user" ? "text-right" : "text-left"; const bgColorClass = message.role === "user" ? "bg-blue-500 self-end" : "bg-gray-700 self-start"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg w-max max-w-[80%] ${bgColorClass}`, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: textAlignClass, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, message.content)); }), loading && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-700 p-3 rounded-lg self-start w-max max-w-[80%]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-200", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "無線通信中…"))), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-2 pt-2", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userMessage", type: "text", placeholder: "あなたのメッセージを入力してください…", className: "p-3 rounded-lg border border-gray-300 focus:outline-none text-black", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "audioMessage", type: "file", accept: "audio/*", className: "p-3 rounded-lg border border-gray-300 focus:outline-none text-black", onChange: handleAudioUpload, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "送信")))); }