91699e45cb
The view now decides only what the menu LISTS. Everything structural is shared, so switching redraws the content and nothing else: - One width. The app sidebar is 210px; the assistant rail was 260px, so every switch shifted the content sideways. - One surface. The tiled ground belongs to the shared panel rather than to one view's empty state, so the transcript and the workspace launcher sit on the same background. - One menu ending. An account card closes both menus with Settings, FAQ, Log out and — for admins only — Admin. These were unlabelled icon buttons in the old header; log out reuses the existing flow rather than a second implementation. The blue gradient header is now a slim white bar. Being the loudest element on screen, it made any view without it look like a different product. Everything measured against it follows from 66px to 52px. The composer has room around it and centres on an empty transcript instead of sitting at the very top, and Create image joins take home, export and attach in the + menu — it acts on the conversation, so it belongs with them rather than as its own button on the rail. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GmpYHPSLGmXGZMyLpn2Lbe
117 lines
9.2 KiB
HTML
117 lines
9.2 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>
|
|
</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>
|
|
<!-- Account card. The same markup renders in the assistant rail, so the
|
|
two menus end the same way. Settings and Log out were only reachable
|
|
from icon buttons in the header, which the slim bar no longer has
|
|
room to explain. -->
|
|
<div class="account-card">
|
|
<button type="button" class="account-card-btn" id="btn-account-menu-rail" aria-haspopup="true" aria-expanded="false" aria-controls="account-menu-rail">
|
|
<span class="account-avatar" id="account-avatar-rail" aria-hidden="true"></span>
|
|
<span class="account-id">
|
|
<span class="account-name" id="account-name-rail"></span>
|
|
<span class="account-email" id="account-email-rail"></span>
|
|
</span>
|
|
<i class="fas fa-chevron-right account-chevron"></i>
|
|
</button>
|
|
<div class="account-menu" id="account-menu-rail" role="menu" hidden>
|
|
<button type="button" class="account-menu-item" role="menuitem" data-account-tab="settings"><i class="fas fa-gear"></i> Settings</button>
|
|
<button type="button" class="account-menu-item" role="menuitem" data-account-tab="faq"><i class="fas fa-circle-question"></i> FAQ</button>
|
|
<button type="button" class="account-menu-item" role="menuitem" data-account-logout><i class="fas fa-right-from-bracket"></i> Log out</button>
|
|
</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-create-image" class="assistant-plus-item" type="button" role="menuitem"><i class="fas fa-wand-magic-sparkles"></i> Create image</button>
|
|
<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">
|