fix(view-context): a corner mark on the bubble, not a row under it
Nightly Build / build (push) Successful in 9s

The sent-message proof was a collapsed <details> under the user bubble: a
row of height in every bubble that carried view context, for something that
is evidence about the message rather than part of it. It also rendered a
blank line, since the bubble is white-space: pre-wrap and the template left
a newline before the element.

Now a faint eye in the bubble's bottom-right corner, revealing the pairs on
hover (on focus for keyboard and touch). Deliberately not expandable, so
scrolling back through a conversation cannot grow a second layout, and the
popover opens downwards rather than over the message it belongs to.

The i18n key stays alive as the mark's aria-label; docs and changelog wording
updated to match.
This commit is contained in:
Daniele
2026-08-23 23:36:32 +01:00
parent 8361a238c7
commit fc226aacab
4 changed files with 75 additions and 32 deletions
+14 -10
View File
@@ -591,18 +591,22 @@ export function renderViewContextPill(host) {
* The proof, in the sent bubble: what this message actually carried. Rendered
* from the server's echo (and, after a reload, from the REST history), so it
* shows the sanitized pairs the model was given — never the browser's intent.
*
* A mark in the bubble's corner, not a row under the message: this is evidence
* about a message, not part of it, and a collapsed row still cost a line of
* height in every bubble that carried one. Deliberately **not** expandable —
* the pairs show on hover (on focus for keyboard and touch) and there is no
* state to leave open, so a conversation scrolled back through never grows a
* second layout.
*
* Written on one line on purpose: the bubble renders `white-space: pre-wrap`, so
* the newline and indent a formatted template would leave before the element are
* a text node the bubble actually shows — a blank line under the message.
*/
function renderViewContextChip(host, msg) {
function renderViewContextMark(host, msg) {
const items = msg.view_context;
if (!items?.length) return nothing;
return html`
<details class="view-ctx-chip">
<summary>
<i class="bi bi-eye"></i>
<span>${t('chat.view_context.chip', { n: items.length })}</span>
</summary>
${renderViewContextItems(items)}
</details>`;
return html`<div class="view-ctx-mark" tabindex="0" aria-label=${t('chat.view_context.chip', { n: items.length })}><i class="bi bi-eye"></i><div class="view-ctx-pop">${renderViewContextItems(items)}</div></div>`;
}
/**
@@ -625,7 +629,7 @@ export function renderMsg(host, msg) {
try {
switch (msg.kind) {
case 'user':
return html`<div class="copilot-msg user ${msg.failed ? 'copilot-msg--failed' : ''}" style="white-space:pre-wrap">${msg.failed ? failedBadge() : nothing}${msg.content}${renderAttachmentChips(host, msg.attachments)}${renderViewContextChip(host, msg)}</div>`;
return html`<div class="copilot-msg user ${msg.view_context?.length ? 'copilot-msg--view-ctx' : ''} ${msg.failed ? 'copilot-msg--failed' : ''}" style="white-space:pre-wrap">${msg.failed ? failedBadge() : nothing}${msg.content}${renderAttachmentChips(host, msg.attachments)}${renderViewContextMark(host, msg)}</div>`;
case 'thinking':
return html`
<div class="copilot-msg assistant copilot-markdown ${msg.failed ? 'copilot-msg--failed' : ''}">