From 309d85ae86a375c39628e6c5b941b074617e29a3 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 8 Sep 2026 23:15:24 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20ChatGPT-style=20mobile=20UI=20=E2=80=94?= =?UTF-8?q?=20slim=20top=20bar=20with=20saved-chats=20drawer,=20plain=20ex?= =?UTF-8?q?ample=20prompts,=20floating=20pill=20composer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/components/assistant.html | 1 + public/css/assistant.css | 76 +++++++++++++++++++------------- public/js/clinicalAssistant.js | 7 +++ 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/public/components/assistant.html b/public/components/assistant.html index 8c76252e..ec8f0f2b 100644 --- a/public/components/assistant.html +++ b/public/components/assistant.html @@ -1,4 +1,5 @@
+

AI Clinical Assistant

diff --git a/public/css/assistant.css b/public/css/assistant.css index 6df2cbce..f62dac6a 100644 --- a/public/css/assistant.css +++ b/public/css/assistant.css @@ -1,5 +1,6 @@ .assistant-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } +.assistant-mobile-menu { display:none; } .assistant-topbar { display:flex; align-items:center; gap:12px; padding:6px 12px; border-bottom:1px solid var(--g200); background:var(--g50); position:sticky; top:0; z-index:4; } .assistant-topbar-title { flex:1; min-width:0; } .assistant-topbar-title h2 { font-size:15px; margin:0; color:var(--g800); } @@ -161,38 +162,53 @@ .assistant-history .card { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; } @media (max-width: 960px) { .assistant-layout { grid-template-columns:minmax(0,1fr) 300px; } .assistant-history { position:static; grid-column:1 / -1; grid-template-columns:auto 1fr; align-items:start; } .assistant-new-chat { grid-column:1; } .assistant-view-switch { grid-column:1; } .assistant-history .card { grid-column:2; grid-row:1 / span 2; } .assistant-main { min-height:auto; } #assistant-chat-view { min-height:auto; grid-template-rows:auto minmax(320px,1fr) auto; } } @media (max-width: 640px) { - .assistant-header { flex-direction:column; align-items:stretch; } - .assistant-topbar { flex-wrap:wrap; } - .assistant-topbar-title { flex-basis:100%; } - .assistant-status { align-self:flex-start; } - /* ChatGPT-style mobile: one column, natural page flow, everything reachable by scroll. */ - .assistant-layout { display:flex; flex-direction:column; grid-template-columns:none; height:auto; min-height:100dvh; } - .assistant-history { display:flex; flex-direction:row; align-items:center; gap:8px; overflow-x:auto; padding:8px 10px; border-bottom:1px solid var(--g200); background:white; height:auto; min-height:0; } - .assistant-history .assistant-new-chat { flex:0 0 auto; } - .assistant-view-switch { flex:0 0 auto; display:flex; } - .assistant-history .card { flex:1 1 auto; display:block; min-width:0; box-shadow:none; border:none; background:none; } - #assistant-saved-chats { flex-direction:row; padding:0; gap:6px; overflow-x:auto; } - .assistant-saved-chat { flex:0 0 auto; max-width:200px; } - .assistant-main { flex:1 1 auto; min-height:60vh; display:flex; } - #assistant-chat-view { display:flex; flex-direction:column; flex:1 1 auto; min-height:60vh; } - .assistant-messages { flex:1 1 auto; max-height:none; padding:10px 12px; } - .assistant-empty { margin:20px auto; } - .assistant-examples { justify-content:flex-start; } - .assistant-examples button { max-width:100%; white-space:normal; text-align:left; border-radius:12px; } - .assistant-side { border-top:1px solid var(--g200); max-height:40vh; overflow-y:auto; } - .assistant-composer { position:static; flex:0 0 auto; } - .assistant-toolbar { flex-direction:column; align-items:stretch; } - .assistant-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; } - .assistant-toolbar-actions .btn-sm { width:100%; justify-content:center; } - .assistant-msg, .assistant-msg.user { max-width:100%; } - .assistant-bubble { font-size:13px; padding:11px 12px; } - .assistant-table-scroll::after { display:block; } - .assistant-composer-footer { flex-direction:column; align-items:stretch; } - .assistant-composer-footer .btn-generate { width:100%; } - .assistant-composer-footer #btn-assistant-cancel:not([hidden]) { width:100%; justify-content:center; } - .assistant-side { gap:10px; } + /* ── ChatGPT-style mobile: quiet, minimal, content first ── */ + .assistant-topbar { flex-wrap:nowrap; gap:8px; padding:10px 14px; } + .assistant-mobile-menu { display:inline-flex; } + .assistant-topbar .btn-sm { padding:6px 8px; } + #btn-assistant-goback span, #btn-assistant-goback { font-size:0; } + #btn-assistant-goback { padding:8px; } + .assistant-topbar-title h2 { font-size:15px; } + .assistant-status { margin-left:auto; font-size:11px; } + .assistant-layout { display:block; height:auto; min-height:100dvh; } + /* Saved chats: full-screen drawer behind the hamburger */ + .assistant-history { position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:130; background:white; box-shadow:0 0 40px rgba(0,0,0,.25); transform:translateX(105%); transition:transform .18s ease; display:flex; flex-direction:column; padding:14px; overflow-y:auto; } + .assistant-layout.mobile-chats-open .assistant-history { transform:translateX(0); } + .assistant-history .card { box-shadow:none; border:1px solid var(--g200); } + .assistant-new-chat { align-self:stretch; } + .assistant-view-switch { margin:6px 0; } + #assistant-saved-chats { flex-direction:column; padding:0 6px 12px; gap:6px; overflow:visible; } + .assistant-saved-chat { max-width:none; } + .assistant-main { min-height:0; } + #assistant-chat-view { display:flex; flex-direction:column; min-height:100dvh; } + .assistant-messages { flex:1 1 auto; max-height:none; padding:8px 14px 120px; } + .assistant-empty { margin:28px auto; max-width:100%; } + .assistant-empty i { font-size:26px; } + .assistant-empty h3 { font-size:16px; text-align:left; } + .assistant-empty p { text-align:left; font-size:13px; } + .assistant-examples { flex-direction:column; align-items:stretch; gap:0; margin:14px 0 0; } + .assistant-examples button { border:none; background:none; color:var(--g700); text-align:left; padding:12px 2px; font-size:14px; border-radius:0; border-bottom:1px solid var(--g100); white-space:normal; width:100%; } + /* Toolbar actions move into the drawer */ + .assistant-toolbar { padding:10px 14px 0; } + .assistant-toolbar-actions { display:none; } + .assistant-layout.mobile-chats-open .assistant-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } + /* Floating pill composer */ + .assistant-composer { position:fixed; left:12px; right:12px; bottom:12px; z-index:60; background:white; border:1px solid var(--g200); border-radius:28px; box-shadow:0 8px 30px rgba(0,0,0,.14); padding:6px 6px 6px 16px; } + .assistant-composer > label { display:none; } + #assistant-context-budget { font-size:10px; } + .assistant-composer-footer { flex-direction:row; align-items:center; gap:4px; margin-top:2px; } + .assistant-composer-footer .btn-generate { width:44px; height:44px; border-radius:50%; padding:0; font-size:0; flex:0 0 auto; } + .assistant-composer-footer .btn-generate i { font-size:16px; } + .assistant-attach { font-size:0; } + .assistant-attach i { font-size:18px; } + .assistant-check { display:none; } + .assistant-composer-footer #btn-assistant-cancel:not([hidden]) { width:auto; padding:8px 12px; } + .assistant-mic { font-size:0; } + .assistant-mic i { font-size:18px; } + .assistant-side { max-height:none; border-top:1px solid var(--g100); padding:12px 14px; } } + /* Patient take home modal + actions */ .assistant-takehome-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 120; } .assistant-takehome-modal .modal-content { width: min(640px, 92vw); max-height: 82vh; display: flex; flex-direction: column; } diff --git a/public/js/clinicalAssistant.js b/public/js/clinicalAssistant.js index 6548e175..724ee530 100644 --- a/public/js/clinicalAssistant.js +++ b/public/js/clinicalAssistant.js @@ -128,6 +128,11 @@ import { var attachInput = document.getElementById('assistant-attach-input'); var input = document.getElementById('assistant-input'); var goBackBtn = document.getElementById('btn-assistant-goback'); + var mobileMenuBtn = document.getElementById('btn-assistant-mobile-menu'); + if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', function(ev) { + ev.stopPropagation(); + document.getElementById('assistant-layout')?.classList.toggle('mobile-chats-open'); + }); var chatViewBtn = document.getElementById('btn-assistant-chat-view'); var learningViewBtn = document.getElementById('btn-assistant-learning-view'); @@ -1527,6 +1532,8 @@ import { function loadSavedChat(id) { if (assistantBusy) return; + var layout = document.getElementById('assistant-layout'); + if (layout) layout.classList.remove('mobile-chats-open'); setBusy(true, 'Loading chat...'); return fetchSavedAssistantChat(id) .then(function (data) {