diff --git a/scripts/doc/web-demo/demo.py b/scripts/doc/web-demo/demo.py index 636db983..c5c02a16 100644 --- a/scripts/doc/web-demo/demo.py +++ b/scripts/doc/web-demo/demo.py @@ -58,6 +58,10 @@ _CHANNELS = [ dict(slot=1, t=-1, n="Emergency"), ] +# Recent-heard mention candidates, newest first. Includes punctuation and HTML +# metacharacters so the browser demo proves labels are rendered as text. +_MENTION_NAMES = ["Sanne", "Sam ", "R&D \"QA\"", "Diego", "Marta", "Noah"] + # --------------------------------------------------------------------------- # Messages per thread (webPushMessages: msgs[] fields o,ts,ds,pl,sn,rs,rp,s,x) # o = outgoing (1) / incoming (0) @@ -151,6 +155,10 @@ def contacts_payload(now): return {"t": "c", "dc": len(_DISCOVERED), "contacts": out, "channels": channels} +def mentions_payload(request_id): + return {"t": "mh", "q": request_id, "names": list(_MENTION_NAMES)} + + def _thread_last(tidx): msgs = _MESSAGES.get(tidx, []) return msgs[-1] if msgs else None diff --git a/scripts/doc/web-demo/index.html b/scripts/doc/web-demo/index.html index e48df383..9cd12713 100644 --- a/scripts/doc/web-demo/index.html +++ b/scripts/doc/web-demo/index.html @@ -28,10 +28,13 @@ .b.in{align-self:flex-start;background:#17181b}.b.out{align-self:flex-end;background:#123f3a} .bname{font-size:11px;color:#19d6c2;margin-bottom:2px}.btext{white-space:pre-wrap} .bmeta{font-size:10px;color:#8a9095;text-align:right;margin-top:2px} -.cb{display:flex;border-top:1px solid #1c1c1f;padding:8px;gap:8px} -.cb input{flex:1;background:#111214;color:#e8e8ea;border:1px solid #2a2a2e;border-radius:18px;padding:9px 14px;font:inherit;outline:none} +.cb{display:flex;border-top:1px solid #1c1c1f;padding:8px;gap:8px;position:relative}.cwrap{position:relative;flex:1;min-width:0} +.cb input{width:100%;background:#111214;color:#e8e8ea;border:1px solid #2a2a2e;border-radius:18px;padding:9px 14px;font:inherit;outline:none} .cb input:focus{border-color:#19d6c2} .cb button{background:#19d6c2;color:#04201d;border:none;border-radius:18px;padding:0 16px;font-weight:700;cursor:pointer} +#mnames{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:12;background:#151619;border:1px solid #2a2a2e;border-radius:8px;box-shadow:0 5px 18px rgba(0,0,0,.5);overflow:hidden} +#mnames.on{display:block}#mnames button{display:block;width:100%;border:0;border-bottom:1px solid #202225;border-radius:0;background:#151619;color:#d7dbdd;text-align:left;padding:9px 13px;font:inherit;cursor:pointer} +#mnames button:last-child{border-bottom:0}#mnames button.on{background:#17342f;color:#19d6c2} #o{flex:1;overflow-y:auto;padding:10px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.4;font-family:'JetBrains Mono',Menlo,monospace;font-size:13px} #tbar{display:flex;border-top:1px solid #1c1c1f;padding:8px 10px;gap:8px;align-items:center} #p{color:#19d6c2;font-weight:700} @@ -78,7 +81,7 @@