function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [messageHistory, setMessageHistory] = React.useState([]); const [memo, setMemo] = React.useState([]); const [audioUrl, setAudioUrl] = React.useState(null); const [showSettings, setShowSettings] = React.useState(false); const [showMemoPanel, setShowMemoPanel] = React.useState(false); const [showMemoInput, setShowMemoInput] = React.useState(false); const [showTerms, setShowTerms] = React.useState(false); const [checkboxChecked, setCheckboxChecked] = React.useState(false); const [videoUploaded, setVideoUploaded] = React.useState(false); const handleSend = async ()=>{ if (input.trim() === "" || !videoUploaded) { alert("Please upload a video before sending a message."); return; } const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setMessageHistory([ ...messageHistory, input ]); setInput(""); try { const response = await fetch("/integrations/gpt-vision/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: input } ] } ] }), headers: { "Content-Type": "application/json" } }); const data = await response.json(); const aiResponse = data.choices[0].message.content; setMessages([ ...newMessages, { role: "assistant", content: aiResponse } ]); // Call the revive function await fetch("/api/revive-function", { method: "POST" }); } catch (error) { console.error("Error:", error); } }; const handleOverlayClick = ()=>{ setShowSettings(false); setShowMemoPanel(false); setShowMemoInput(false); setShowTerms(false); }; const addMemo = (memoText)=>{ if (memoText.trim() !== "") { setMemo([ ...memo, memoText ]); } }; const handleCheckboxChange = (e)=>{ setCheckboxChecked(e.target.checked); }; const handleVideoUpload = (e)=>{ const file = e.target.files[0]; if (file) { const url = URL.createObjectURL(file); setAudioUrl(url); setVideoUploaded(true); alert("動画がアップロードされ、MP3に変換されました。"); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 relative", onClick: handleOverlayClick, __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, !checkboxChecked && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 z-30", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg space-y-4", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: checkboxChecked, onChange: handleCheckboxChange, className: "mr-2", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "利用規約に同意する")), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); if (checkboxChecked) { handleOverlayClick(); } }, className: `${checkboxChecked ? "bg-green-500" : "bg-gray-500 cursor-not-allowed"} text-white p-2 rounded w-full`, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "続行"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-gray-300", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold font-abeezee", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "RーVoice"), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); setShowSettings(!showSettings); }, className: "text-white bg-gray-600 rounded-full p-2 inline-block", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }))), showSettings && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 bg-white shadow-lg w-64 h-full p-4 z-10 transition-transform duration-300", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); setShowMemoPanel(!showMemoPanel); }, className: "bg-yellow-500 text-white p-2 rounded w-full mt-4", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "テキストメッセージ履歴"), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); setShowMemoInput(!showMemoInput); }, className: "bg-green-500 text-white p-2 rounded w-full mt-4", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "メモ"), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); setShowTerms(!showTerms); }, className: "bg-blue-500 text-white p-2 rounded w-full mt-4", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, "利用規約")), showMemoPanel && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 bg-white shadow-lg w-64 h-full p-4 z-20 transition-transform duration-300", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, "テキストメッセージ履歴"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-1 mt-2", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, messageHistory.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, item)))), showMemoInput && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 bg-white shadow-lg w-64 h-full p-4 z-20 transition-transform duration-300", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "メモ"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border rounded w-full p-1 mt-2", placeholder: "", onKeyDown: (e)=>{ if (e.key === "Enter") { addMemo(e.target.value); e.target.value = ""; } }, __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-1 mt-2", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, memo.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, item)))), showTerms && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 bg-white shadow-lg w-64 h-full p-4 z-20 transition-transform duration-300", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, "利用規約"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, "ここに利用規約が記載されます。")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 h-[445px] bg-[#ffffff]", __source: { fileName: "", lineNumber: 205, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg p-3 ${message.role === "user" ? "bg-blue-500 text-white" : "bg-white text-black"}`, __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, message.content, message.audio && /*#__PURE__*/ React.createElement("audio", { controls: true, className: "mt-2", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: message.audio, type: "audio/mp4", __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "h-[100px] bg-[#f6f6f6] border-t border-gray-200 flex flex-col justify-end", __source: { fileName: "", lineNumber: 230, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 flex items-center space-x-2", __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "messageInput", type: "text", value: input, onChange: (e)=>setInput(e.target.value), className: "flex-1 border rounded-full py-2 px-4", placeholder: "Enter your message...", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); handleSend(); }, className: "bg-blue-500 text-white rounded-full p-2 inline-block", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", onChange: handleVideoUpload, className: "hidden", id: "videoUpload", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "videoUpload", className: "cursor-pointer bg-red-500 text-white rounded-full p-2 inline-block", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen", __source: { fileName: "", lineNumber: 270, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 271, columnNumber: 7 }, __self: this })); }