c7820c5ae6
The header bar is gone. Settings and Log out moved into the account card, so a whole band of chrome had nothing left to hold. The brand now heads the menu alongside the search and collapse controls, on one row rather than three stacked full-width ones. btn-settings and btn-logout are retained hidden as the canonical handlers other code already calls, rather than duplicating that logic. One shell for every view. Each tab was a plain white page while the assistant and the workspace launcher sat on a tiled card, so opening any menu item changed the whole face of the app. The tiled ground and the card edge now belong to .main-content, and only the contents differ. The assistant replaces the shell card rather than nesting a second one inside it. Search, in both views, from the same palette: the workspace searches the app menu, the assistant searches saved chats. Both sources are already in memory, so this needs no new endpoint. Cmd/Ctrl+K opens it, arrows and Enter work, and the assistant publishes its chats rather than the palette reaching into its internals. The collapse icon is now directional angles that rotate when collapsed, so it always states what the click will do; fa-table-columns said nothing. Mobile: the sidebar slides in whole, so the in-sidebar collapse control is hidden there, the account card sticks to the foot of a scrolling menu, and the palette is full-bleed instead of a centred dialog on a small screen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GmpYHPSLGmXGZMyLpn2Lbe
126 lines
9.8 KiB
HTML
126 lines
9.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>
|
|
<!-- Brand, collapse and search share one row, as in the reference UIs.
|
|
Three stacked full-width rows wasted the top of the menu. -->
|
|
<div class="menu-head">
|
|
<div class="menu-brand">
|
|
<i class="fas fa-stethoscope"></i>
|
|
<h1>Pediatric Clinical Tools</h1>
|
|
</div>
|
|
<button type="button" class="menu-icon-btn" data-menu-search title="Search" aria-label="Search"><i class="fas fa-magnifying-glass"></i></button>
|
|
<button type="button" class="menu-icon-btn assistant-menu-toggle" data-menu-toggle aria-expanded="true" title="Hide menu" aria-label="Hide menu"><i class="fas fa-angles-left"></i></button>
|
|
</div>
|
|
<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">
|