function AiTutorInfoButton({ onInfoClick }) { return /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onInfoClick, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-info-circle text-[#121212] text-2xl", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function AiTutorInfoButtonStory() { const handleInfoClick = ()=>alert('Information or help related to the application.'); return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen w-full bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiTutorInfoButton, { onInfoClick: handleInfoClick, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [question, setQuestion] = React.useState(''); const [response, setResponse] = React.useState(''); const handleQuestionChange = (event)=>{ setQuestion(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); const requestBody = { messages: [ { "role": "user", "content": question } ] }; const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const data = await response.json(); setResponse(data.choices[0].message.content); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f4f8] p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-4xl bg-white shadow-md rounded-lg overflow-hidden relative", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AiTutorInfoButton, { onInfoClick: ()=>alert('Info about AI Tutor'), __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("header", { className: "bg-[#0077b6] p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "AI Tutor")), /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Ask the AI tutor any question you have in mind."), response && /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 font-roboto mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 26 }, __self: this }, response)), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "question", className: "w-full p-2 text-base text-gray-700 bg-gray-50 rounded-lg border border-gray-300 focus:outline-none focus:border-[#0077b6] font-roboto", placeholder: "Type your question here...", rows: "4", value: question, onChange: handleQuestionChange, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-[#0077b6] text-white rounded-lg hover:bg-[#005f8a] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Ask")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center items-center mt-6", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./ai-tutor-image.jpg", alt: "AI Tutor visual representation", className: "max-w-xs md:max-w-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }))))); }