function MainComponent() { const [loading, setLoading] = React.useState(false); const [formData, setFormData] = React.useState({ name: "", email: "", phone: "", reservation_date: "", reservation_time: "" }); const [submissionResponse, setSubmissionResponse] = React.useState(""); const handleChange = (event)=>{ setFormData({ ...formData, [event.target.name]: event.target.value }); }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); setSubmissionResponse(""); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": JSON.stringify(formData) } ], system_prompt: `Process this reservation and write it to Google Spreadsheet` }) }); const result = await response.json(); setSubmissionResponse(result.choices[0].message.content); } catch (error) { console.error("Error submitting reservation form:", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 space-y-3 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-center text-gray-900", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "予約フォーム"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mt-4 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mt-4 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "電話番号"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mt-4 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "予約日"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "reservation_date", value: formData.reservation_date, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mt-4 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "希望時間"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "reservation_time", value: formData.reservation_time, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mt-6", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:border-indigo-700 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "予約する"))), submissionResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, submissionResponse)))); }