104 lines
6.5 KiB
HTML
104 lines
6.5 KiB
HTML
<div class="assistant-topbar">
|
|
<button id="btn-assistant-mobile-menu" class="btn-sm btn-ghost assistant-mobile-menu" type="button" title="Saved chats"><i class="fas fa-bars"></i></button>
|
|
<div class="assistant-topbar-title">
|
|
<h2><i class="fas fa-brain" style="color:var(--purple);"></i> AI Clinical Assistant</h2>
|
|
</div>
|
|
<div class="assistant-status" id="assistant-status">
|
|
<span class="assistant-dot"></span>
|
|
<span id="assistant-status-text">Ready</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="assistant-layout" id="assistant-layout">
|
|
<aside class="assistant-history">
|
|
<button id="btn-assistant-goback" class="btn-sm btn-ghost assistant-goback-rail" type="button" title="Back to the main menu"><i class="fas fa-arrow-left"></i> Go back</button>
|
|
<button id="btn-assistant-create-image" class="assistant-create-image" type="button"><i class="fas fa-wand-magic-sparkles"></i> Create image</button>
|
|
<button id="btn-assistant-clear" class="assistant-new-chat" type="button"><i class="fas fa-plus"></i> New chat</button>
|
|
<nav class="assistant-view-switch" aria-label="Assistant views">
|
|
<button id="btn-assistant-chat-view" class="active" type="button"><i class="fas fa-comments"></i> Chat</button>
|
|
<button id="btn-assistant-learning-view" type="button"><i class="fas fa-graduation-cap"></i> Learning Hub</button>
|
|
</nav>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-bookmark"></i> Saved Chats</h3>
|
|
</div>
|
|
<div id="assistant-saved-chats" class="assistant-saved-chats">
|
|
<p class="assistant-muted">Chats save automatically as you go.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card assistant-gallery-card">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-images"></i> Images</h3>
|
|
</div>
|
|
<div id="assistant-image-gallery" class="assistant-image-gallery">
|
|
<p class="assistant-muted">Generated images appear here.</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="assistant-main card">
|
|
<div id="assistant-chat-view">
|
|
<div class="assistant-toolbar">
|
|
<div>
|
|
<strong>Clinical Question</strong>
|
|
<span id="assistant-model-label" class="model-tag">Admin model</span>
|
|
</div>
|
|
<div class="assistant-toolbar-actions">
|
|
<button id="btn-assistant-export-pdf" class="btn-sm btn-ghost" type="button"><i class="fas fa-file-pdf"></i> Export PDF</button>
|
|
<button id="btn-assistant-download-chat" class="btn-sm btn-ghost" type="button">Download transcript</button>
|
|
<button id="btn-assistant-takehome" class="btn-sm btn-ghost" type="button"><i class="fas fa-heart"></i> Patient take home</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="assistant-messages" class="assistant-messages" aria-live="polite">
|
|
<div class="assistant-empty">
|
|
<i class="fas fa-book-medical"></i>
|
|
<h3>Evidence-first pediatric assistant</h3>
|
|
<p>Ask a real clinical question. Citations stay linked to the source cards on the right.</p>
|
|
<div class="assistant-examples">
|
|
<button type="button" data-assistant-example="In a 4-year-old with acute wheeze, when should magnesium sulfate be considered and what dose is recommended?">Status asthma escalation</button>
|
|
<button type="button" data-assistant-example="What are the red flags for bilious vomiting in neonates, and what immediate workup is recommended?">Bilious vomiting</button>
|
|
<button type="button" data-assistant-example="Compare bronchiolitis and asthma management in infants, citing clinical references.">Bronchiolitis vs asthma</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="assistant-form" class="assistant-composer">
|
|
<label for="assistant-input">Clinical question</label>
|
|
<textarea id="assistant-input" rows="1" placeholder="Ask a focused clinical question..." autocomplete="off" aria-describedby="assistant-context-warning"></textarea>
|
|
<div id="assistant-context-warning" role="alert" hidden></div>
|
|
<div id="assistant-attachments" class="assistant-attachments" aria-label="Attached images" hidden></div>
|
|
<div class="assistant-composer-footer">
|
|
<label class="assistant-attach" for="assistant-attach-input" title="Attach up to 4 images (PNG, JPEG, WebP)"><i class="fas fa-paperclip"></i></label>
|
|
<input type="file" id="assistant-attach-input" accept="image/png,image/jpeg,image/webp" multiple hidden>
|
|
<button id="btn-assistant-voice" class="assistant-voice-btn" type="button" title="Voice conversation"><i class="fas fa-headset"></i></button>
|
|
<button id="btn-assistant-mic" class="assistant-mic" type="button" title="Dictate your question"><i class="fas fa-microphone"></i></button>
|
|
<button id="btn-assistant-cancel" class="btn-sm btn-ghost" type="button" hidden><i class="fas fa-stop"></i> Cancel search</button>
|
|
<button id="btn-assistant-send" class="btn-send" type="submit"><i class="fas fa-arrow-up"></i></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="assistant-learning-view" class="assistant-learning-view" hidden>
|
|
<div id="assistant-learning-root" aria-live="polite"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="assistant-side">
|
|
<div class="card">
|
|
<div class="card-header"><h3><i class="fas fa-wand-magic-sparkles"></i> Generated image</h3></div>
|
|
<div class="assistant-side-body">
|
|
<div id="assistant-visual-output" class="assistant-visual-output"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header"><h3><i class="fas fa-quote-right"></i> Sources</h3></div>
|
|
<div id="assistant-sources" class="assistant-sources">
|
|
<p class="assistant-muted">Citations appear here after an answer.</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="/css/assistant.css">
|