pediatric-ai-scribe-v3/public/components/settings.html
Daniel Onyejesi e16e47f634 Add AI content generation to Learning Hub CMS
Backend (src/routes/learningAI.js):
- POST /api/admin/learning/ai-generate
  * Accepts: topic text, uploaded file (PDF/TXT/MD/HTML), or Nextcloud WebDAV path
  * Extracts text from PDFs via pdf-parse; plain text read directly
  * Fetches WebDAV files using stored Nextcloud credentials
  * Prompts AI to return structured JSON: title, subject, body (HTML), questions[]
  * Strips code fences, falls back to regex JSON extraction if needed
- POST /api/admin/learning/ai-refine — refine existing body with instructions
- GET  /api/admin/learning/webdav-browse — PROPFIND-based Nextcloud file browser
- POST /api/admin/learning/webdav-path — save user's default browse path

Frontend:
- AI Generate button in CMS editor header (gradient purple→blue)
- Panel with 3 source tabs: By Topic / Upload File / Nextcloud
- Drag-and-drop file dropzone with DataTransfer API support
- WebDAV file browser: navigate folders, select files, breadcrumb path
- Options: question count, content type (article/quiz/pearl), model selector, instructions
- Refine Current Body: prompt-driven AI rewrite of existing content
- Generated content auto-fills title, subject, type, Tiptap body, quiz questions

Settings:
- Nextcloud section: "Learning Hub Default Browse Path" field (shown when connected)
- Saves to webdav_learning_path column via /api/admin/learning/webdav-path

DB: ALTER TABLE users ADD COLUMN IF NOT EXISTS webdav_learning_path TEXT
2026-03-24 00:17:28 -04:00

105 lines
6.6 KiB
HTML

<div class="module-header">
<h2><i class="fas fa-cog"></i> Settings</h2>
<p>Account security, integrations, and personal templates</p>
</div>
<div class="settings-page">
<!-- 2FA -->
<div class="settings-section card">
<h3><i class="fas fa-shield-halved"></i> Two-Factor Authentication</h3>
<p id="2fa-status">Status: Loading...</p>
<button id="btn-setup-2fa" class="btn-sm btn-primary">Enable 2FA</button>
<button id="btn-disable-2fa" class="btn-sm btn-ghost hidden">Disable 2FA</button>
<div id="2fa-setup" class="hidden">
<p>Scan this QR code with your authenticator app:</p>
<img id="2fa-qr" src="" alt="QR Code">
<p>Or enter manually: <code id="2fa-secret"></code></p>
<div class="form-group">
<label>Enter the 6-digit code to verify:</label>
<input type="text" id="2fa-verify-code" maxlength="6" placeholder="123456">
<button id="btn-verify-2fa" class="btn-sm btn-success">Verify & Enable</button>
</div>
</div>
</div>
<!-- Nextcloud -->
<div class="settings-section card">
<h3><i class="fas fa-cloud"></i> Nextcloud Integration</h3>
<p>Export generated documents to your Nextcloud.</p>
<div id="nc-status">Not connected</div>
<div class="form-group">
<label>Nextcloud URL</label>
<input type="text" id="nc-url" placeholder="https://cloud.example.com">
</div>
<div class="form-group">
<label>Username</label>
<input type="text" id="nc-user" placeholder="your-username">
</div>
<div class="form-group">
<label>App Password</label>
<input type="password" id="nc-pass" placeholder="Generate in Nextcloud → Settings → Security">
<small>Go to Nextcloud → Settings → Security → Create new app password</small>
</div>
<button id="btn-nc-connect" class="btn-sm btn-primary">Connect</button>
<button id="btn-nc-disconnect" class="btn-sm btn-ghost hidden">Disconnect</button>
<div id="nc-webdav-path-section" class="hidden" style="margin-top:14px;padding-top:14px;border-top:1px solid var(--g100);">
<label style="display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:4px;">Learning Hub — Default Browse Path</label>
<small style="display:block;color:var(--g500);font-size:12px;margin-bottom:6px;">Folder opened first when picking files for AI content generation (e.g. <code>/Medical-Resources</code>)</small>
<div style="display:flex;gap:8px;">
<input type="text" id="nc-webdav-path" placeholder="/Medical-Resources" style="flex:1;font-size:13px;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;">
<button id="btn-nc-save-path" class="btn-sm btn-primary">Save Path</button>
</div>
</div>
</div>
<!-- My Templates / Memories -->
<div class="settings-section card">
<h3><i class="fas fa-book-medical"></i> My Templates</h3>
<p style="font-size:13px;color:var(--g600);">Save reusable templates for physical exam, ROS, encounter format, etc. The AI will use these when generating notes. You can reference them by saying "use my normal physical exam" in dictation.</p>
<div style="margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
<select id="mem-category" style="font-size:13px;padding:5px 8px;border:1px solid var(--g300);border-radius:6px;">
<option value="physical_exam">Physical Exam Template</option>
<option value="ros">Review of Systems Template</option>
<option value="encounter_format">Encounter Note Format</option>
<option value="family_history">Family History Format</option>
<option value="assessment_plan">Assessment &amp; Plan Format</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="mem-name" style="font-size:13px;padding:5px 8px;border:1px solid var(--g300);border-radius:6px;flex:1;min-width:150px;" placeholder="Template name (e.g. Normal PE)">
</div>
<textarea id="mem-content" rows="5" style="width:100%;font-size:12px;padding:8px;border:1px solid var(--g300);border-radius:6px;resize:vertical;box-sizing:border-box;" placeholder="Paste your template here. Example: HEENT: Normocephalic, atraumatic. Eyes: PERRL. Ears: TMs clear. Throat: clear..."></textarea>
<div style="margin-top:8px;display:flex;gap:8px;">
<button id="btn-mem-save" class="btn-sm btn-primary"><i class="fas fa-plus"></i> Add Template</button>
</div>
<div id="mem-list" style="margin-top:12px;display:flex;flex-direction:column;gap:6px;">
<p style="color:var(--g400);font-size:13px;">Loading templates...</p>
</div>
</div>
<!-- Saved Encounters -->
<div class="settings-section card">
<h3><i class="fas fa-floppy-disk"></i> Saved Encounters</h3>
<p style="font-size:13px;color:var(--g600);">Encounters are automatically deleted after 7 days per site policy.</p>
<div id="saved-enc-list" style="display:flex;flex-direction:column;gap:6px;">
<p style="color:var(--g400);font-size:13px;">Loading...</p>
</div>
</div>
<!-- Compliance -->
<div class="settings-section card">
<h3><i class="fas fa-shield-halved"></i> Compliance & Usage</h3>
<div class="hipaa-info">
<p><strong>AWS Bedrock</strong> is available with a Business Associate Agreement (BAA) for HIPAA-eligible workloads.</p>
<ul>
<li>✅ All connections use HTTPS/TLS encryption</li>
<li>✅ Authentication with optional 2FA</li>
<li>✅ No patient data stored on server beyond session</li>
<li>✅ AWS Bedrock supports BAA for HIPAA compliance</li>
<li>✅ Azure OpenAI supports BAA for HIPAA compliance</li>
</ul>
<p><strong>Important:</strong> Check with your institution's guidelines and policies before use. This tool is not intended for production clinical use without proper organizational authorization and provider BAAs in place. Use with caution.</p>
</div>
</div>
</div>