pediatric-ai-scribe-v3/public/components/assistant.html
Daniel 5940ebede7 fix: Workspace swaps the menu, it does not jump to a page of its own
Workspace mode rendered the app menu twice — once in the rail and again as a
card grid that replaced the chat column — so clicking it landed you somewhere
that looked nothing like the assistant. There is one menu now: the rail swaps,
the chat column stays where it is.

The Sources panel was already hidden in workspace mode, but its 330px grid track
was not, leaving an empty gutter. Both collapse states now drop the track.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BkfrkQwA4YGrGw9LZSpeAq
2026-09-10 00:00:12 +02:00

100 lines
7.4 KiB
HTML

<div class="assistant-topbar">
<button id="btn-assistant-goback" class="btn-sm btn-ghost" type="button" title="Back to the main menu"><i class="fas fa-arrow-left"></i> Go back</button>
<button id="btn-assistant-toggle-history" class="assistant-toggle-history" type="button" aria-expanded="true" aria-controls="assistant-history" title="Hide saved chats" aria-label="Hide saved chats"><i class="fas fa-table-columns"></i></button>
<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">
<div class="assistant-drawer-backdrop" id="assistant-drawer-backdrop"></div>
<aside class="assistant-history">
<button id="btn-assistant-drawer-close" class="assistant-drawer-close" type="button" aria-label="Close saved chats"><i class="fas fa-xmark"></i></button>
<div class="assistant-mode-switch" role="tablist" aria-label="Assistant or workspace">
<button type="button" role="tab" id="btn-assistant-mode-assistant" class="active" aria-selected="true" data-assistant-mode="assistant"><i class="fas fa-brain"></i> Assistant</button>
<button type="button" role="tab" id="btn-assistant-mode-workspace" aria-selected="false" data-assistant-mode="workspace"><i class="fas fa-grip"></i> Workspace</button>
</div>
<button id="btn-assistant-goback-rail" 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> <span>New chat</span><kbd class="assistant-kbd">Ctrl+Shift+O</kbd></button>
<div class="card">
<button type="button" class="card-header assistant-chats-header" id="btn-assistant-chats-toggle" aria-expanded="true" aria-controls="assistant-saved-chats">
<h3><i class="fas fa-bookmark"></i> Saved Chats</h3>
<i class="fas fa-chevron-down assistant-chats-caret"></i>
</button>
<div id="assistant-saved-chats" class="assistant-saved-chats">
<p class="assistant-muted">Chats save automatically as you go.</p>
</div>
</div>
<!-- Populated from the app's real .tab-btn list so this never drifts
out of sync with the menu it mirrors. Shown in Workspace mode. -->
<nav class="assistant-rail-workspace" id="assistant-rail-workspace" aria-label="Workspace" hidden>
<div id="assistant-workspace-links" class="assistant-rail-links"></div>
</nav>
</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"><i class="fas fa-download"></i> 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">
<h3>Pediatric Clinical Assistant</h3>
<p class="assistant-empty-badge"><i class="fas fa-book-medical"></i> Answers built only from your indexed library</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>
<div class="assistant-model-pill" id="assistant-model-pill">
<select id="assistant-chat-model-select" class="assistant-model-control" aria-label="Chat model" hidden></select>
</div>
<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">
<span id="assistant-autosave-state" class="assistant-autosave-state" aria-live="polite"></span>
<div class="assistant-tools">
<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>
</div>
<button id="btn-assistant-send" class="btn-send" type="submit"><i class="fas fa-arrow-up"></i></button>
</div>
</form>
</div>
</section>
<aside class="assistant-side">
<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">