AIassPage.html

<!-- Dedicated AI Assistants Page -->
<div class="min-h-screen flex flex-col bg-white" x-data="{ activeChat: null }">
  <!-- Header -->
  <header class="bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <h1 class="text-2xl font-bold">TN Medical Connect</h1>
      <nav class="space-x-4 text-sm">
        <a href="#" class="hover:underline">Home</a>
        <a href="#" class="hover:underline font-semibold">AI Assistants</a>
        <a href="#" class="hover:underline">AI in Healthcare</a>
        <!-- ...other nav links -->
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-1 max-w-7xl mx-auto px-4 py-6">
    <h2 class="text-3xl font-bold text-gray-800 mb-4">🤖 Dedicated AI Assistants</h2>
    <p class="text-gray-600 mb-8">Chat with our specialty AI assistants trained in specific domains. Get quick answers or advice in Endocrinology, Pulmonology, or general medical studies.</p>

    <div class="grid gap-6 md:grid-cols-3">
      <!-- Endocrinology AI Assistant -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <div class="flex items-center mb-3">
          <div class="bg-primary text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold mr-2">E</div>
          <h3 class="text-xl font-semibold text-gray-800">Endocrinology AI</h3>
        </div>
        <p class="text-sm text-gray-700 mb-4 flex-1">An AI assistant for hormone-related queries. Ask about diabetes management, thyroid disorders, and more.</p>
        <button class="bg-primary text-white text-sm font-medium px-3 py-2 rounded hover:bg-opacity-90"
                @click="activeChat = (activeChat === 'endo' ? null : 'endo')">
          {{ activeChat === 'endo' ? 'Close Chat' : 'Chat Now' }}
        </button>
        <!-- Chat interface (toggle visibility) -->
        <div x-show="activeChat === 'endo'" class="mt-4 border-t border-gray-300 pt-3">
          <div class="bg-gray-100 p-2 rounded mb-2 text-sm">
            <p class="text-gray-800"><strong>User:</strong> What are the common symptoms of hypothyroidism?</p>
          </div>
          <div class="bg-primary bg-opacity-5 p-2 rounded text-sm">
            <p class="text-gray-800"><strong>Endo AI:</strong> Common symptoms include fatigue, weight gain, cold intolerance, dry skin, and hair loss, among others. If you suspect hypothyroidism, a TSH blood test is recommended.</p>
          </div>
        </div>
      </div>
      <!-- Pulmonology AI Assistant -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <div class="flex items-center mb-3">
          <div class="bg-primary text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold mr-2">P</div>
          <h3 class="text-xl font-semibold text-gray-800">Pulmonology AI</h3>
        </div>
        <p class="text-sm text-gray-700 mb-4 flex-1">An AI assistant for lung and respiratory questions. Ask about asthma, COPD, infections, and more.</p>
        <button class="bg-primary text-white text-sm font-medium px-3 py-2 rounded hover:bg-opacity-90"
                @click="activeChat = (activeChat === 'pulmo' ? null : 'pulmo')">
          {{ activeChat === 'pulmo' ? 'Close Chat' : 'Chat Now' }}
        </button>
        <div x-show="activeChat === 'pulmo'" class="mt-4 border-t border-gray-300 pt-3">
          <div class="bg-gray-100 p-2 rounded mb-2 text-sm">
            <p class="text-gray-800"><strong>User:</strong> How is moderate asthma typically treated?</p>
          </div>
          <div class="bg-primary bg-opacity-5 p-2 rounded text-sm">
            <p class="text-gray-800"><strong>Pulmo AI:</strong> Moderate asthma is usually managed with a daily inhaled corticosteroid and a rescue inhaler (albuterol) as needed. A leukotriene modifier or long-acting beta-agonist may be added if control is not adequate.</p>
          </div>
        </div>
      </div>
      <!-- Student AI Assistant -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <div class="flex items-center mb-3">
          <div class="bg-primary text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold mr-2">S</div>
          <h3 class="text-xl font-semibold text-gray-800">Med Student AI</h3>
        </div>
        <p class="text-sm text-gray-700 mb-4 flex-1">An AI assistant for medical students. Get help with understanding concepts, exam prep, or general medical knowledge questions.</p>
        <button class="bg-primary text-white text-sm font-medium px-3 py-2 rounded hover:bg-opacity-90"
                @click="activeChat = (activeChat === 'student' ? null : 'student')">
          {{ activeChat === 'student' ? 'Close Chat' : 'Chat Now' }}
        </button>
        <div x-show="activeChat === 'student'" class="mt-4 border-t border-gray-300 pt-3">
          <div class="bg-gray-100 p-2 rounded mb-2 text-sm">
            <p class="text-gray-800"><strong>User:</strong> Can you explain the mechanism of action of beta-blockers?</p>
          </div>
          <div class="bg-primary bg-opacity-5 p-2 rounded text-sm">
            <p class="text-gray-800"><strong>Student AI:</strong> Beta-blockers work by blocking beta-adrenergic receptors in the heart (and other tissues). This leads to a decrease in heart rate and contractility (β1 effect), and in some cases bronchoconstriction (β2 effect). They are used to manage hypertension, angina, and arrhythmias, among other conditions.</p>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-gray-100">
    <div class="max-w-7xl mx-auto px-4 py-5 text-sm text-gray-600">
      © 2025 TN Medical Connect &middot; <a href="#" class="text-primary hover:underline">Feedback on AI Assistants</a>
    </div>
  </footer>
</div>