From 0c3de5bdfb4b2f67140e72a2842a69c4695520c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Mon, 5 Oct 2026 17:29:28 +0200 Subject: [PATCH] feat(coach): move an answer's model and tokens behind a details icon The tokens and model no longer sit as right-aligned text under a Coach answer. The row is one left-aligned group: copy, read aloud, try again, a details icon, then the time. The details icon is a focusable button whose tooltip names the model and the token count; it opens on hover, on keyboard focus and on a tap, and a second tap, a tap elsewhere or Escape closes it. Strings in all seven locales; the joined tokens-with-model string is gone. --- e2e/coach-answer-layout.spec.ts | 75 +++++++--- messages/de.json | 5 +- messages/en.json | 5 +- messages/es.json | 5 +- messages/fr.json | 5 +- messages/it.json | 5 +- messages/ko.json | 5 +- messages/pl.json | 5 +- .../__tests__/message-actions.test.tsx | 66 +++++---- .../insights/coach-panel/message-actions.tsx | 131 ++++++++++++------ 10 files changed, 204 insertions(+), 103 deletions(-) diff --git a/e2e/coach-answer-layout.spec.ts b/e2e/coach-answer-layout.spec.ts index b4aec3b52..0bf0979ee 100644 --- a/e2e/coach-answer-layout.spec.ts +++ b/e2e/coach-answer-layout.spec.ts @@ -12,11 +12,12 @@ import { aiBlockAvailable, serveAiBlock } from "./setup/ai-capabilities"; * * Contracts under test: * - * 1. Under an answer there is exactly one action row: the icon group and - * the time on the left, the tokens and model on the right, both halves - * on one line (their centres within 2 px, the row no taller than one - * 44 px target), the left group starting on the bubble's left edge and - * the meta ending inside the answer column. + * 1. Under an answer there is exactly one action row, left-aligned on the + * bubble's left edge and no taller than one 44 px target: copy, read + * aloud, try again, details, then the time. The model and the tokens + * are not text on the row; the details icon shows them in a tooltip on + * keyboard focus (desktop) and on a tap (phone), and a second tap or + * Escape closes it. * 2. The follow-up chips sit in the answer's column: their left edge is * the bubble's, their text is the answer's size, and a chip is at most * 36 px tall beside a pointer and at least 44 px on a phone. @@ -246,28 +247,58 @@ test.describe("Coach answer layout", () => { const bubble = last.locator('[data-slot="coach-answer-bubble"]'); const column = last.locator('[data-slot="coach-answer-column"]'); const row = last.locator('[data-slot="coach-answer-actions"]'); - const left = row.locator('[data-slot="coach-answer-actions-left"]'); - const meta = row.locator('[data-slot="coach-answer-meta"]'); + const info = row.locator('[data-slot="coach-answer-info"]'); + const time = row.locator('[data-slot="coach-message-time"]'); await expect(row).toHaveCount(1); - await expect(meta).toContainText("1,234 tokens"); await expect(row).toHaveCSS("opacity", "1"); - const [bubbleBox, columnBox, rowBox, leftBox, metaBox] = await Promise.all( - [bubble, column, row, left, meta].map(box), - ); - expect( - Math.abs( - leftBox.y + leftBox.height / 2 - (metaBox.y + metaBox.height / 2), - ), - "left group and meta share one line", - ).toBeLessThanOrEqual(2); + await expect(row).not.toContainText("tokens"); + await expect(row.locator('[data-slot="coach-answer-meta"]')).toHaveCount(0); + await expect(info).toHaveAttribute("aria-label", "Answer details"); + const [bubbleBox, columnBox, rowBox, answerCopyBox, infoBox, timeBox] = + await Promise.all( + [ + bubble, + column, + row, + row.locator('[data-slot="coach-copy-message"]'), + info, + time, + ].map(box), + ); expect(rowBox.height, "the row is one line").toBeLessThanOrEqual(44); - expect(Math.abs(leftBox.x - bubbleBox.x)).toBeLessThanOrEqual(1); - expect(metaBox.x + metaBox.width).toBeLessThanOrEqual( + expect(Math.abs(answerCopyBox.x - bubbleBox.x)).toBeLessThanOrEqual(1); + expect(infoBox.x, "details follows the other icons").toBeGreaterThan( + answerCopyBox.x, + ); + expect(timeBox.x, "the time comes last").toBeGreaterThan(infoBox.x); + expect(timeBox.x + timeBox.width).toBeLessThanOrEqual( columnBox.x + columnBox.width + 1, ); - await expect(left.locator('[data-slot="coach-message-time"]')).toHaveCount( - 1, - ); + for (const [b, name] of [ + [infoBox, "details"], + [timeBox, "time"], + ] as const) { + expect( + Math.abs( + b.y + b.height / 2 - (answerCopyBox.y + answerCopyBox.height / 2), + ), + `${name} shares the row's line`, + ).toBeLessThanOrEqual(2); + } + + // The details tooltip: focus opens it on a desktop, a tap on a phone. + const tip = page.locator('[data-slot="coach-answer-info-content"]'); + await expect(tip).toHaveCount(0); + if (desktop) await info.focus(); + else await info.tap(); + await expect(tip).toBeVisible(); + await expect(tip).toContainText("Model: gpt-4o-mini-2024-07-18"); + await expect(tip).toContainText("1,234 tokens"); + await expect(info).toHaveAttribute("aria-describedby", /.+/); + await shoot(page, testInfo, `answer-info-${viewport.label}`); + if (desktop) await page.keyboard.press("Escape"); + else await info.tap(); + await expect(tip).toHaveCount(0); // 2. The chips in the answer's column, at the answer's size. const chips = last.locator('[data-slot="coach-follow-up-chips"]'); diff --git a/messages/de.json b/messages/de.json index c45a8287b..c5947cd3f 100644 --- a/messages/de.json +++ b/messages/de.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "Zeigen, was der Coach berücksichtigt hat", "thinkingDetail": "Beantwortet aus deinem Gesundheits-Snapshot.", "tokensUsed": "{count} Tokens", - "tokensUsedWithModel": "{count} Tokens · {model}", "askAboutThis": "Den Coach dazu fragen", "readStrip": { "label": "Üblicher Bereich", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date}, {time}", "areasDoneOne": "1 Bereich angesehen", "areasDoneFew": "{count} Bereiche angesehen", - "areasDoneOther": "{count} Bereiche angesehen" + "areasDoneOther": "{count} Bereiche angesehen", + "info": "Details zur Antwort", + "infoModel": "Modell: {model}" } }, "relativeJustNow": "gerade eben", diff --git a/messages/en.json b/messages/en.json index 6582a631e..ecb67bc15 100644 --- a/messages/en.json +++ b/messages/en.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "Show what the Coach considered", "thinkingDetail": "Answered from your health snapshot.", "tokensUsed": "{count} tokens", - "tokensUsedWithModel": "{count} tokens · {model}", "askAboutThis": "Ask the coach about this", "readStrip": { "label": "Usual range", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date}, {time}", "areasDoneOne": "Looked at 1 area", "areasDoneFew": "Looked at {count} areas", - "areasDoneOther": "Looked at {count} areas" + "areasDoneOther": "Looked at {count} areas", + "info": "Answer details", + "infoModel": "Model: {model}" } }, "relativeJustNow": "just now", diff --git a/messages/es.json b/messages/es.json index d4996861e..9f192a8e5 100644 --- a/messages/es.json +++ b/messages/es.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "Mostrar lo que el Coach tuvo en cuenta", "thinkingDetail": "Respondido a partir de tu resumen de salud.", "tokensUsed": "{count} tokens", - "tokensUsedWithModel": "{count} tokens · {model}", "askAboutThis": "Pregúntale al coach sobre esto", "readStrip": { "label": "Rango habitual", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date}, {time}", "areasDoneOne": "1 área consultada", "areasDoneFew": "{count} áreas consultadas", - "areasDoneOther": "{count} áreas consultadas" + "areasDoneOther": "{count} áreas consultadas", + "info": "Detalles de la respuesta", + "infoModel": "Modelo: {model}" } }, "relativeJustNow": "ahora mismo", diff --git a/messages/fr.json b/messages/fr.json index 8b11b0e67..8fe0245ee 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "Montrer ce que le Coach a pris en compte", "thinkingDetail": "Réponse établie à partir de ton aperçu santé.", "tokensUsed": "{count} jetons", - "tokensUsedWithModel": "{count} jetons · {model}", "askAboutThis": "Interroger le coach à ce sujet", "readStrip": { "label": "Plage habituelle", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date}, {time}", "areasDoneOne": "1 domaine consulté", "areasDoneFew": "{count} domaines consultés", - "areasDoneOther": "{count} domaines consultés" + "areasDoneOther": "{count} domaines consultés", + "info": "Détails de la réponse", + "infoModel": "Modèle : {model}" } }, "relativeJustNow": "à l’instant", diff --git a/messages/it.json b/messages/it.json index 03b89d1a8..03989123d 100644 --- a/messages/it.json +++ b/messages/it.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "Mostra cosa ha considerato il Coach", "thinkingDetail": "Risposta basata sul tuo riepilogo di salute.", "tokensUsed": "{count} token", - "tokensUsedWithModel": "{count} token · {model}", "askAboutThis": "Chiedi al coach", "readStrip": { "label": "Intervallo abituale", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date}, {time}", "areasDoneOne": "1 area consultata", "areasDoneFew": "{count} aree consultate", - "areasDoneOther": "{count} aree consultate" + "areasDoneOther": "{count} aree consultate", + "info": "Dettagli della risposta", + "infoModel": "Modello: {model}" } }, "relativeJustNow": "proprio ora", diff --git a/messages/ko.json b/messages/ko.json index 9ba7aa1be..f569b77b4 100644 --- a/messages/ko.json +++ b/messages/ko.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "코치가 참고한 내용 보기", "thinkingDetail": "건강 스냅샷을 바탕으로 답했어요.", "tokensUsed": "{count} 토큰", - "tokensUsedWithModel": "{count} 토큰 · {model}", "askAboutThis": "코치에게 물어보기", "readStrip": { "label": "평소 범위", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date} {time}", "areasDoneOne": "영역 1개 확인", "areasDoneFew": "영역 {count}개 확인", - "areasDoneOther": "영역 {count}개 확인" + "areasDoneOther": "영역 {count}개 확인", + "info": "답변 정보", + "infoModel": "모델: {model}" } }, "relativeJustNow": "방금", diff --git a/messages/pl.json b/messages/pl.json index 3cca6e11c..0cc83a5e2 100644 --- a/messages/pl.json +++ b/messages/pl.json @@ -3023,7 +3023,6 @@ "thinkingExpandAria": "Pokaż, co Coach wziął pod uwagę", "thinkingDetail": "Odpowiedź na podstawie Twojego podsumowania zdrowia.", "tokensUsed": "{count} tokenów", - "tokensUsedWithModel": "{count} tokenów · {model}", "askAboutThis": "Zapytaj trenera o to", "readStrip": { "label": "Typowy zakres", @@ -3143,7 +3142,9 @@ "timeEarlier": "{date}, {time}", "areasDoneOne": "Sprawdzono 1 obszar", "areasDoneFew": "Sprawdzono {count} obszary", - "areasDoneOther": "Sprawdzono {count} obszarów" + "areasDoneOther": "Sprawdzono {count} obszarów", + "info": "Szczegóły odpowiedzi", + "infoModel": "Model: {model}" } }, "relativeJustNow": "przed chwilą", diff --git a/src/components/insights/coach-panel/__tests__/message-actions.test.tsx b/src/components/insights/coach-panel/__tests__/message-actions.test.tsx index 0d53a6e70..45c326508 100644 --- a/src/components/insights/coach-panel/__tests__/message-actions.test.tsx +++ b/src/components/insights/coach-panel/__tests__/message-actions.test.tsx @@ -2,9 +2,9 @@ * The one action row under a Coach message, and the follow-up chips that * live in the answer's column. * - * - Assistant: copy, read aloud, try again, then the time, in one left - * group; the tokens and model in the right group of the same row. No - * feedback thumbs, no evidence disclosure. + * - Assistant: copy, read aloud, try again, details, then the time, in one + * left-aligned row; the model and tokens live behind the details icon, + * not as text on the row. No feedback thumbs, no evidence disclosure. * - User: copy, remember, time in one row; remember is an icon. * - The time reads "14:32" today, "yesterday 14:32", or the date further * back. @@ -50,7 +50,7 @@ vi.mock("../read-aloud", async (importOriginal) => { }); import { ChatBubble, areChatBubblePropsEqual } from "../chat-bubble"; -import { answerMetaText, messageTimeText } from "../message-actions"; +import { answerInfoLines, messageTimeText } from "../message-actions"; function render(node: React.ReactNode, locale: "en" | "de" = "en") { return renderToStaticMarkup( @@ -100,26 +100,27 @@ const ANSWER = { describe("assistant action row", () => { const html = render(); const row = slot(html, "coach-answer-actions"); - const left = slot(row, "coach-answer-actions-left"); - it("lists copy, read aloud, try again and the time on the left, in that order", () => { + it("lists copy, read aloud, try again, details and the time, in that order", () => { const order = [ "coach-copy-message", "coach-read-aloud", "coach-try-again", + "coach-answer-info", "coach-message-time", - ].map((name) => left.indexOf(`data-slot="${name}"`)); + ].map((name) => row.indexOf(`data-slot="${name}"`)); expect(order.every((at) => at > -1)).toBe(true); expect([...order].sort((a, b) => a - b)).toEqual(order); }); - it("puts the tokens and the model on the right of the same row", () => { - const meta = slot(row, "coach-answer-meta"); - expect(meta).toContain("1,234 tokens · gpt-4o-mini"); - expect(meta).toContain('title="gpt-4o-mini"'); - expect(meta).toContain("truncate"); - expect(left).not.toContain("coach-answer-meta"); - expect(row).toContain("justify-between"); + it("keeps the model and tokens off the row, behind a named details button", () => { + expect(row).not.toContain("1,234"); + expect(row).not.toContain("gpt-4o-mini"); + expect(row).not.toContain("justify-between"); + expect(row).not.toContain("coach-answer-meta"); + const info = slot(row, "coach-answer-info"); + expect(info).toMatch(/^ + + + {lines.map((line) => ( + {line} + ))} + + + + ); +} + /** * When the message was written, as text. The visible run is short ("14:32"); * the full date and time ride the `title` and the screen-reader text. @@ -293,34 +355,23 @@ export function AssistantMessageActions({ model, }: AssistantMessageActionsProps) { const { t, locale } = useTranslations(); - const meta = answerMetaText(tokens, model, resolveIntlLocale(locale), t); + const info = answerInfoLines(tokens, model, resolveIntlLocale(locale), t); return (
-
- - {!streaming && } - {!streaming && onRegenerate && ( - - )} - {createdAt && } -
-

- {meta} -

+ + {!streaming && } + {!streaming && onRegenerate && ( + + )} + {!streaming && info.length > 0 && } + {createdAt && }
); }