function MedicalChatbotIcon({ size, color }) { const iconClasses = `fas fa-paper-plane text-${color} ${size}`; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: iconClasses, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this })); } function MedicalChatbotIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MedicalChatbotIcon, { size: "text-2xl", color: "#000000", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MedicalChatbotIcon, { size: "text-4xl", color: "#ff0000", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MedicalChatbotIcon, { size: "text-6xl", color: "#00ff00", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { sender: "bot", text: "Bonjour! Comment puis-je vous aider aujourd'hui?" } ]); const [userMessage, setUserMessage] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (userMessage.trim()) { setMessages([ ...messages, { sender: "user", text: userMessage } ]); setUserMessage(""); fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: userMessage }) }).then((res)=>res.json()).then((data)=>{ setMessages((prevMessages)=>[ ...prevMessages, { sender: "bot", text: data.reply } ]); }); } }; const handleChange = (e)=>{ setUserMessage(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] flex flex-col justify-center items-center font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg w-[90%] md:w-[60%] p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-4xl text-center mb-4 font-bold text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Consultation Médicale"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#e9e9e9] p-4 rounded-lg text-[#333]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>{ const justifyClass = msg.sender === "bot" ? "justify-start" : "justify-end"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center space-x-2 text-sm md:text-lg ${justifyClass}`, __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, msg.sender === "bot" && /*#__PURE__*/ React.createElement(MedicalChatbotIcon, { size: "text-xl", color: "#333", __source: { fileName: "", lineNumber: 42, columnNumber: 44 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, msg.text)); })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#f1f1f1] p-4 rounded-lg text-[#333]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex space-x-2", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "user_message", value: userMessage, onChange: handleChange, className: "flex-1 p-2 rounded-lg border border-[#ccc]", placeholder: "Ecrivez votre message ici...", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#007bff] text-white rounded-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(MedicalChatbotIcon, { size: "text-xl", color: "white", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Ressources"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/image1.jpg", alt: "medical resource 1", className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/path/to/pdf1.pdf", className: "text-blue-500 mt-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Document PDF 1")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/video_thumbnail.jpg", alt: "video resource thumbnail", className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/path/to/video.mp4", className: "text-blue-500 mt-2", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Vidéo de Recommandation"))))))); }