function MainComponent() { const [content, setContent] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [faqs, setFaqs] = useState({ informational: [], operational: [], transactional: [] }); const [streamingResponse, setStreamingResponse] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingResponse, onFinish: (message)=>{ try { const parsedFaqs = JSON.parse(message); setFaqs(parsedFaqs.categorizedFaqs || { informational: [], operational: [], transactional: [] }); setStreamingResponse(""); } catch (e) { console.error("Error parsing FAQs:", e); setError("There was an error generating the FAQs. Please try again."); } } }); const generateFaqs = async (text)=>{ try { setLoading(true); setError(null); const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a friendly, empathetic healthcare FAQ generator who thinks like a patient. Your goal is to create easy-to-understand FAQs that address real patient concerns and worries. Use warm, reassuring language that makes patients feel understood and supported. Break down complex medical terms into simple explanations that anyone can understand." }, { role: "user", content: `Create 30 patient-friendly FAQs that address common concerns and questions. Use simple, conversational language that helps patients feel more at ease. Divide the FAQs into these categories: INFORMATIONAL FAQs (EXACTLY 10): - Think like a worried patient - what would they want to know? - Focus on common fears and concerns about treatments/procedures - Explain things in everyday language, like talking to a friend - Help patients understand what to expect and feel more confident - Address emotional aspects (pain, anxiety, recovery) with empathy - Break down complex medical terms into simple explanations - Focus on questions that start with "Will it hurt?", "What happens during...?", "How will I feel after...?" OPERATIONAL FAQs (EXACTLY 10): - Focus on practical details about visiting and using the facility: * Hours and scheduling (when are you open, how to make appointments) * Location and parking (where to park, how to find departments) * Check-in process (what to bring, where to go first) * Appointment preparation (what to wear, eating/drinking rules) * Facility amenities (bathrooms, cafeteria, wifi) * Wait times and duration (how long things take) * Required documents and items * Transportation options * Accessibility features * Contact information and communication channels TRANSACTIONAL FAQs (EXACTLY 10): - Explain costs and insurance in simple, clear terms - Break down billing procedures into easy steps - Help patients understand payment options - Use supportive language when discussing financial matters - Make complex payment processes easier to understand Important: - Write questions from a patient's perspective (e.g., "Will this hurt?", "How long will I be there?") - Use friendly, reassuring language that makes patients feel understood - If certain details aren't available, clearly say so - Avoid medical jargon - explain everything simply - Focus on addressing common worries and fears - Be empathetic and supportive in your answers Content to analyze: ${text}` } ], json_schema: { name: "categorized_healthcare_faqs", schema: { type: "object", properties: { categorizedFaqs: { type: "object", properties: { informational: { type: "array", minItems: 10, maxItems: 10, items: { type: "object", properties: { question: { type: "string" }, answer: { type: "string" } }, required: [ "question", "answer" ], additionalProperties: false } }, operational: { type: "array", minItems: 10, maxItems: 10, items: { type: "object", properties: { question: { type: "string" }, answer: { type: "string" } }, required: [ "question", "answer" ], additionalProperties: false } }, transactional: { type: "array", minItems: 10, maxItems: 10, items: { type: "object", properties: { question: { type: "string" }, answer: { type: "string" } }, required: [ "question", "answer" ], additionalProperties: false } } }, required: [ "informational", "operational", "transactional" ], additionalProperties: false } }, required: [ "categorizedFaqs" ], additionalProperties: false } }, stream: true }) }); handleStreamResponse(response); } catch (err) { console.error("Error:", err); setError("There was an error generating the FAQs. Please try again."); } finally{ setLoading(false); } }; const handleContentSubmit = ()=>{ if (!content) { setError("Please enter some content"); return; } generateFaqs(content); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/1909741a-0de8-4356-a4ed-7124d05b6374/-/format/auto/", alt: "UpMedico Healthcare Marketing Logo", className: "h-24 mb-4", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 text-center", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "Healthcare FAQ Generator")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-8", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-48 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: content, onChange: (e)=>setContent(e.target.value), placeholder: "Paste your healthcare article or content here...", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleContentSubmit, disabled: loading, className: "mt-4 w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 disabled:bg-gray-400", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, "Generate FAQs")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-4", __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }))), streamingResponse && /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, "Generating FAQs..."), (faqs.informational.length > 0 || faqs.operational.length > 0 || faqs.transactional.length > 0) && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-blue-600", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "Informational FAQs", /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 ml-2", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "(Medical conditions, treatments, and health information)")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, faqs.informational.map((faq, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-gray-200 pb-4 last:border-b-0", __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-2", __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this }, "Q: ", faq.question), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 242, columnNumber: 21 }, __self: this }, "A: ", faq.answer))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-green-600", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, "Operational FAQs", /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 ml-2", __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, "(Hours, location, appointments, and facility information)")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, faqs.operational.map((faq, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-gray-200 pb-4 last:border-b-0", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-2", __source: { fileName: "", lineNumber: 261, columnNumber: 21 }, __self: this }, "Q: ", faq.question), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, "A: ", faq.answer))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-purple-600", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "Transactional FAQs", /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 ml-2", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, "(Insurance, payments, and billing information)")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, faqs.transactional.map((faq, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-gray-200 pb-4 last:border-b-0", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-2", __source: { fileName: "", lineNumber: 283, columnNumber: 21 }, __self: this }, "Q: ", faq.question), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, "A: ", faq.answer)))))))); }