b55a748361
The assistant carried its own bar above the layout, on top of the blue app header that both pages now share. On desktop it held a visually-hidden title, a mobile-only drawer button and a status pill — so it was mostly dead space, and it made the assistant taller than the app page it is supposed to match. The bar is gone. The ready/busy indicator moved into the composer footer, next to the work it describes, and the drawer button floats on phones rather than occupying a strip the desktop layout does not have. The rail now sticks to the top of the layout instead of 52px below a bar that no longer exists. The menu toggle used fa-table-columns, a split-pane glyph that does not read as "menu". Both copies now use fa-bars and rotate when collapsed to show which way they will act. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GmpYHPSLGmXGZMyLpn2Lbe
98 lines
7.8 KiB
HTML
98 lines
7.8 KiB
HTML
<div class="assistant-layout" id="assistant-layout">
|
|
<button id="btn-assistant-mobile-menu" class="assistant-mobile-menu" type="button" title="Saved chats" aria-label="Saved chats"><i class="fas fa-bars"></i></button>
|
|
<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>
|
|
<p class="assistant-preview-note"><i class="fas fa-circle-info"></i> You are previewing. Sign in to save chats, export and generate images.</p>
|
|
<button type="button" class="assistant-menu-toggle" data-menu-toggle aria-expanded="true" title="Hide menu" aria-label="Hide menu"><i class="fas fa-bars"></i></button>
|
|
<div class="assistant-mode-switch" role="tablist" aria-label="Assistant or workspace">
|
|
<button type="button" role="tab" class="active" aria-selected="true" data-assistant-mode="assistant"><i class="fas fa-brain"></i> Assistant</button>
|
|
<button type="button" role="tab" aria-selected="false" data-assistant-mode="workspace"><i class="fas fa-grip"></i> Workspace</button>
|
|
</div>
|
|
<div class="assistant-rail-actions">
|
|
<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>
|
|
<button id="btn-assistant-create-image" class="assistant-create-image" type="button" title="Create image" aria-label="Create image"><i class="fas fa-wand-magic-sparkles"></i></button>
|
|
</div>
|
|
<!-- Workspace mode replaces the saved chats here with the app's own
|
|
menu, so the rail is never left empty. Same source as the cards. -->
|
|
<nav class="assistant-rail-workspace" id="assistant-rail-workspace" aria-label="Workspace">
|
|
<div id="assistant-workspace-links" class="assistant-rail-links"></div>
|
|
</nav>
|
|
<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>
|
|
</aside>
|
|
|
|
<section class="assistant-main card">
|
|
<!-- Workspace launcher, rendered from the app's real .tab-btn list so
|
|
it cannot drift from the menu it mirrors. Desktop only: on a phone
|
|
the drawer already is the menu. -->
|
|
<div id="assistant-workspace-view" class="assistant-workspace-view" hidden>
|
|
<div id="assistant-workspace-cards" class="assistant-workspace-cards"></div>
|
|
</div>
|
|
<div id="assistant-chat-view">
|
|
<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>
|
|
<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">
|
|
<div class="assistant-tools">
|
|
<!-- One + for everything that acts on the conversation, so the
|
|
top of the view stays empty and both modes line up. -->
|
|
<div class="assistant-plus">
|
|
<button id="btn-assistant-plus" class="assistant-plus-btn" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="assistant-plus-menu" title="Attach and export" aria-label="Attach and export"><i class="fas fa-plus"></i></button>
|
|
<div id="assistant-plus-menu" class="assistant-plus-menu" role="menu" hidden>
|
|
<label class="assistant-plus-item" for="assistant-attach-input" role="menuitem"><i class="fas fa-paperclip"></i> Attach images</label>
|
|
<button id="btn-assistant-takehome" class="assistant-plus-item" type="button" role="menuitem"><i class="fas fa-heart"></i> Patient take home</button>
|
|
<button id="btn-assistant-export-pdf" class="assistant-plus-item" type="button" role="menuitem"><i class="fas fa-file-pdf"></i> Export PDF</button>
|
|
<button id="btn-assistant-download-chat" class="assistant-plus-item" type="button" role="menuitem"><i class="fas fa-download"></i> Download transcript</button>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="assistant-attach-input" accept="image/png,image/jpeg,image/webp" multiple hidden>
|
|
<span id="assistant-autosave-state" class="assistant-autosave-state" aria-live="polite"></span>
|
|
<span class="assistant-status" id="assistant-status"><span class="assistant-dot"></span><span id="assistant-status-text">Ready</span></span>
|
|
</div>
|
|
<div class="assistant-composer-right">
|
|
<div class="assistant-model-pill" id="assistant-model-pill" hidden>
|
|
<select id="assistant-chat-model-select" class="assistant-model-control" aria-label="Chat model" hidden></select>
|
|
</div>
|
|
<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-send" class="btn-send" type="submit"><i class="fas fa-arrow-up"></i></button>
|
|
</div>
|
|
</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">
|