@fusion.dev/helix-headless 0.144.0 → 0.145.0

package/dist/chat/composer/chat-composer.d.ts

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A field for writing a turn in a conversation.
@@ -15,6 +15,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The composer clears only when no listener cancels the send, so the text is
  * kept when you cancel a send that failed.
  *
+ * **In a form, the draft is the composer's value**, submitted under `name`. A
+ * form reset puts back the `value` the markup declared, and a `<fieldset
+ * disabled>` turns the composer off. Sending is still `helix-send`, and it
+ * does not submit the form.
+ *
+ * **`typing` says whether the user is writing**, and `helix-typing` is sent
+ * each time it changes: when they start, and when they send or stop for
+ * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
+ * side.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -25,6 +35,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content under the field at the leading edge, such as an attachment button or a model picker.
  *
  * @event {HelixSendEvent} helix-send - Fired when the user sends their turn, and cancelable.
+ * @event {HelixTypingEvent} helix-typing - The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
  * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble.
  *
  * @csspart composer - The whole composer.
@@ -35,11 +46,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart start - The box around the `start` slot.
  * @csspart tools - The row under the field.
  */
-export declare class HelixHeadlessChatComposer extends HelixElement {
-    /**
-     * Whether the composer blocks input, such as while a turn is being sent.
-     */
-    disabled: boolean;
+export declare class HelixHeadlessChatComposer extends HelixFormElement {
     /**
      * The field's name, read by screen readers.
      */
@@ -67,6 +74,11 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
      * has to mean a new line and nothing else.
      */
     submitOn: 'button' | 'enter';
+    /**
+     * How long after the last keystroke the user still counts as typing, in
+     * milliseconds.
+     */
+    typingTimeout: number;
     /**
      * The text the user has written.
      *
@@ -78,6 +90,17 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
      * @internal Read by the transcript to find the composer among its children.
      */
     readonly isChatComposer = true;
+    /** Whether the user is writing, which `helix-typing` announces. */
+    private writing;
+    /** The pause after which the user has stopped writing. */
+    private readonly pause;
+    /**
+     * Whether the user is writing: true from their first keystroke until they
+     * send, clear the field, or pause for `typing-timeout` milliseconds.
+     */
+    get typing(): boolean;
+    /** Records whether the user is writing, and says so when that changed. */
+    private markTyping;
     /**
      * Sends what is written, and returns whether the send went through.
      *
@@ -86,6 +109,15 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
      * a reasonable way to send.
      */
     send(): boolean;
+    /**
+     * The value the markup declared, which a form reset and an empty restore go
+     * back to. `value` does not reflect, so its attribute stays as written.
+     */
+    private get declared();
+    /** Puts back the draft the markup declared when the form is reset. */
+    formResetCallback(): void;
+    /** Brings back the draft when the browser restores the form. */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     /**
      * Says on each tool box whether anything is in it.
      *

package/dist/chat/composer/chat-composer.js

@@ -4,27 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, markRegion, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixElement {
+let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFormElement {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         this.label = 'Message';
         this.placeholder = '';
         this.rows = 1;
         this.sendLabel = 'Send';
         this.submitOn = 'enter';
+        this.typingTimeout = 3000;
         this.value = '';
         this.isChatComposer = true;
+        this.writing = false;
+        this.pause = new DelayController(this, { renders: false });
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
             this.dispatchEvent(new Event('input'));
+            this.markTyping(this.value !== '');
         };
         this.handleSend = () => {
             this.send();
@@ -40,17 +43,44 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
             this.send();
         };
     }
+    get typing() {
+        return this.writing;
+    }
+    markTyping(typing) {
+        if (typing) {
+            this.pause.start(Math.max(0, this.typingTimeout), () => this.markTyping(false));
+        }
+        else {
+            this.pause.cancel();
+        }
+        if (typing === this.writing) {
+            return;
+        }
+        this.writing = typing;
+        this.dispatchEvent(new HelixTypingEvent({ typing }));
+    }
     send() {
         const value = this.value.trim();
-        if (value === '' || this.disabled) {
+        if (value === '' || this.isDisabled) {
             return false;
         }
         if (!this.dispatchEvent(new HelixSendEvent({ value }))) {
             return false;
         }
         this.value = '';
+        this.markTyping(false);
         return true;
     }
+    get declared() {
+        return this.getAttribute('value') ?? '';
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        this.value = this.declared;
+    }
+    formStateRestoreCallback(state) {
+        this.value = typeof state === 'string' ? state : this.declared;
+    }
     markEmpty() {
         for (const name of ['start', 'end']) {
             markRegion(this.renderRoot, name, [name]);
@@ -59,6 +89,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
+        if (changed.has('value')) {
+            this.internals.setFormValue(this.value === '' ? null : this.value);
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -69,7 +102,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
       part="send"
       type="button"
       aria-label=${this.sendLabel}
-      ?disabled=${this.disabled}
+      ?disabled=${this.isDisabled}
       @click=${this.handleSend}
     >
       <svg
@@ -90,7 +123,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
         aria-label=${this.label}
         placeholder=${this.placeholder}
         rows=${this.rows}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
@@ -102,9 +135,6 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
     </div>`;
     }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessChatComposer.prototype, "disabled", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "label", void 0);
@@ -120,6 +150,9 @@ __decorate([
 __decorate([
     property({ attribute: 'submit-on' })
 ], HelixHeadlessChatComposer.prototype, "submitOn", void 0);
+__decorate([
+    property({ attribute: 'typing-timeout', type: Number })
+], HelixHeadlessChatComposer.prototype, "typingTimeout", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "value", void 0);

package/dist/chat/message/chat-message.d.ts

@@ -19,6 +19,13 @@ export declare const FAILED_LABEL = "Not sent";
  * and announced once when it settles. A screen reader cannot follow a stream
  * read out character by character.
  *
+ * A screen reader names the turn by its author and its time, such as "You, 2
+ * minutes ago". The author is `author-label`, or "You" for `me`, or the
+ * `author` itself where it is a name; give a turn by `them` an `author-label`
+ * to name it. The chat it sits in holds the sentence and the word for `me`, so
+ * a page in another language sets them once there. The time moves on by
+ * itself, so "now" becomes "1 minute ago" while the page is open.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -62,6 +69,14 @@ export declare class HelixHeadlessChatMessage extends HelixElement {
      * anything else is a name the consumer styles.
      */
     author?: string;
+    /**
+     * The author's name, as a screen reader says it at the start of the turn,
+     * such as "Support" or "Ada Lovelace".
+     *
+     * Empty reads "You" for `me`, the `author` itself where it is a name, and
+     * nothing for `them`.
+     */
+    authorLabel: string;
     /**
      * Label for a message that did not send.
      */
@@ -93,15 +108,31 @@ export declare class HelixHeadlessChatMessage extends HelixElement {
      * holds the reason. Everything else that moves it is the consumer's.
      */
     state?: 'failed' | 'sending' | 'sent' | 'streaming';
+    /**
+     * @internal Set by the chat: the word for `me` and the sentence that names a
+     * turn with both an author and a time, in the chat's language.
+     */
+    turnWords: import("../naming.js").TurnWords;
     /**
      * @internal Read by the transcript to identify its children across the light
      * DOM, which is cheaper than `instanceof`. Not a consumer's to read or set.
      */
     readonly isChatMessage = true;
-    private clock;
+    /** The time the reading is drawn against, moved on when the words go stale. */
+    private readonly clock;
     /** The timestamp, or nothing where there is not one to read. */
     private get moment();
     protected willUpdate(changed: PropertyValues): void;
+    /** The time as it reads now, or nothing where the turn has none. */
+    private get reading();
+    /**
+     * What a screen reader calls the turn: who wrote it, and when.
+     *
+     * **The name of an `article` is never its content**, so without one a reader
+     * moving through a transcript heard "article" for every turn and had to read
+     * each to learn who wrote it.
+     */
+    private get name();
     private renderTime;
     /**
      * The status glyph, behind a seam so a tier can draw its own.

package/dist/chat/message/chat-message.js

@@ -6,19 +6,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, relativeTime, requestChange, TONE_MARKS, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { authorWords, TURN_WORDS, turnName } from '../naming.js';
+import { RelativeClockController } from '../relative-clock.js';
 export const FAILED_LABEL = 'Not sent';
 let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixElement {
     constructor() {
         super(...arguments);
         this.at = '';
+        this.authorLabel = '';
         this.failedLabel = FAILED_LABEL;
         this.locale = '';
         this.retryLabel = 'Try again';
         this.sendingLabel = 'Sending';
+        this.turnWords = TURN_WORDS;
         this.isChatMessage = true;
-        this.clock = undefined;
+        this.clock = new RelativeClockController(this, {
+            locale: () => this.locale,
+            moment: () => this.moment,
+        });
         this.handleFill = () => {
             this.markEmpty();
         };
@@ -50,19 +57,25 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (changed.has('at')) {
-            this.clock = Date.now();
+        if (changed.has('at') || changed.has('locale')) {
+            this.clock.tick();
         }
-        hostAria(this.internals, { role: 'article' });
+        hostAria(this.internals, { label: this.name, role: 'article' });
         this.internals.ariaBusy = this.state === 'streaming' ? 'true' : null;
     }
+    get reading() {
+        const moment = this.moment;
+        return moment ? relativeTime(this.locale)(moment, new Date(this.clock.now)).text : '';
+    }
+    get name() {
+        return turnName(authorWords(this.author, this.authorLabel, this.turnWords), this.reading, this.turnWords);
+    }
     renderTime() {
         const moment = this.moment;
         if (!moment) {
             return nothing;
         }
-        const { text } = relativeTime(this.locale)(moment, new Date(this.clock ?? Date.now()));
-        return html `<time part="time" datetime=${moment.toISOString()}>${text}</time>`;
+        return html `<time part="time" datetime=${moment.toISOString()}>${this.reading}</time>`;
     }
     renderMark() {
         const { icon, label } = TONE_MARKS.danger;
@@ -124,6 +137,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessChatMessage.prototype, "author", void 0);
+__decorate([
+    property({ attribute: 'author-label' })
+], HelixHeadlessChatMessage.prototype, "authorLabel", void 0);
 __decorate([
     property({ attribute: 'failed-label' })
 ], HelixHeadlessChatMessage.prototype, "failedLabel", void 0);
@@ -140,8 +156,8 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessChatMessage.prototype, "state", void 0);
 __decorate([
-    state()
-], HelixHeadlessChatMessage.prototype, "clock", void 0);
+    property({ attribute: false })
+], HelixHeadlessChatMessage.prototype, "turnWords", void 0);
 HelixHeadlessChatMessage = __decorate([
     customElement('helix-headless-chat-message')
 ], HelixHeadlessChatMessage);

package/dist/chat/naming.d.ts

@@ -0,0 +1,22 @@
+/** What the chat names its turns with, which it hands to each of them. */
+export interface TurnWords {
+    /** The word for `me`, such as "You". */
+    me: string;
+    /** The sentence for a turn with an author and a time, with `{author}` and `{time}`. */
+    sentence: string;
+}
+/** The words a chat says its turns with, where nobody said otherwise. */
+export declare const TURN_WORDS: TurnWords;
+/**
+ * Who wrote a turn, in words: its `author-label`, or else the chat's word for
+ * `me`, or else the `author` itself where it is a name.
+ *
+ * `them` is the other side of a two-sided conversation and not a name, so it
+ * says nothing until it is given an `author-label`.
+ */
+export declare const authorWords: (author: string | undefined, authorLabel: string, words: TurnWords) => string;
+/**
+ * The turn's accessible name: the sentence where it has an author and a time,
+ * and whichever of the two it has otherwise. Empty where it has neither.
+ */
+export declare const turnName: (author: string, time: string, words: TurnWords) => string;

package/dist/chat/naming.js

@@ -0,0 +1,12 @@
+import { fillTemplate } from '@fusion.dev/helix-core';
+export const TURN_WORDS = { me: 'You', sentence: '{author}, {time}' };
+export const authorWords = (author, authorLabel, words) => {
+    if (authorLabel !== '') {
+        return authorLabel;
+    }
+    if (author === 'me') {
+        return words.me;
+    }
+    return author === undefined || author === 'them' ? '' : author;
+};
+export const turnName = (author, time, words) => author !== '' && time !== '' ? fillTemplate(words.sentence, { author, time }) : author || time;

package/dist/chat/relative-clock.d.ts

@@ -0,0 +1,39 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** What the clock reads from its host. */
+export interface RelativeClockOptions {
+    /** The locale the reading is written in. Empty is the runtime's own. */
+    locale: () => string;
+    /** The instant being read, or nothing where there is none. */
+    moment: () => Date | undefined;
+}
+/**
+ * The time a relative reading is drawn against, moved on when the reading
+ * would change.
+ *
+ * **One wakeup when the words go stale, and none in between.** `relativeTime`
+ * says how long its answer holds, so the clock asks core's shared ticker for
+ * exactly that moment: a turn a minute old wakes once a minute, an hour old
+ * once an hour. Every turn on the page shares the ticker's one timer.
+ *
+ * `Format Date` keeps the same arrangement inline, and the two belong in one
+ * core controller.
+ */
+export declare class RelativeClockController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The time the host last drew against, in milliseconds. */
+    now: number;
+    private stop;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: RelativeClockOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Reads the clock again and schedules the next reading.
+     *
+     * The host calls it when the instant or the locale changes, and the ticker
+     * calls it when the words go stale. **Only on a page**: a server has nobody
+     * to update a reading for, and a subscription there holds the element after
+     * its markup is sent.
+     */
+    tick(): void;
+}

package/dist/chat/relative-clock.js

@@ -0,0 +1,31 @@
+import { relativeTime, subscribe } from '@fusion.dev/helix-core';
+export class RelativeClockController {
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.now = Date.now();
+        this.stop = undefined;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.tick();
+    }
+    hostDisconnected() {
+        this.stop?.();
+        this.stop = undefined;
+    }
+    tick() {
+        this.stop?.();
+        this.stop = undefined;
+        this.now = Date.now();
+        this.host.requestUpdate();
+        const moment = this.options.moment();
+        if (!moment || !this.host.isConnected) {
+            return;
+        }
+        const { next } = relativeTime(this.options.locale())(moment, new Date(this.now));
+        if (Number.isFinite(next)) {
+            this.stop = subscribe(next, () => this.tick());
+        }
+    }
+}

package/dist/chat/root/chat-root.d.ts

@@ -7,6 +7,8 @@ export interface ChatTurn {
     at?: string;
     /** Who said it: `me`, `them`, or a name the consumer styles. */
     author?: string;
+    /** Who said it, as a screen reader names the turn, as on `ChatMessage`. */
+    authorLabel?: string;
     /**
      * What identifies it across changes to the set.
      *
@@ -44,6 +46,20 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * render from the server and suit most conversations. `turns` draws a long
  * transcript one window at a time, so the log needs a block size of its own.
  *
+ * **A conversation is built from three elements.** The chat holds the
+ * transcript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits
+ * in the `composer` slot. When the user sends, `helix-send` reaches the chat:
+ * add their turn with `author="me"` and `state="sending"`, then set `state` to
+ * `sent` or `failed` when your server answers. Add the reply as a turn with
+ * `state="streaming"`, write its text as it arrives, and set `state` to `sent`
+ * when it is complete. While the user types, the composer sends
+ * `helix-typing`, which you can pass on to the other side. Show the other
+ * side's typing in the `status` slot.
+ *
+ * A screen reader names each turn by its author and its time, such as "You, 2
+ * minutes ago". Set `me-label` and `message-label` to say it in your language,
+ * and give each turn by `them` an `author-label`.
+ *
  * A turn from `turns` is drawn in the chat's shadow root, so style it through
  * the forwarded `message-*` parts. A turn by `me` also gets each part with
  * `-mine` added, and the turn's state adds `message-meta-failed`,
@@ -141,6 +157,16 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * The conversation's name, read by screen readers.
      */
     label: string;
+    /**
+     * The word a screen reader says for `me` when it names a turn.
+     */
+    meLabel: string;
+    /**
+     * The name a screen reader gives a turn with both an author and a time.
+     * `{author}` is who wrote it and `{time}` is when, as the turn shows it. A
+     * turn with only one of the two is named by that one.
+     */
+    messageLabel: string;
     /**
      * Whether the transcript follows new turns to the bottom.
      *
@@ -186,6 +212,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     /** The last thing said, and how many times something has been. */
     private announcement;
     private said;
+    /**
+     * The words every turn is named with, kept as one object between changes so
+     * a turn is told again only when they change.
+     */
+    private words;
     /** Watches for turns arriving, since a manual slot hears nothing about them. */
     private watcher;
     /** Watches the turns' own `state`, which is when one of them settles. */
@@ -353,6 +384,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      */
     private follow;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Hands each turn written as a child the words it is named with, once it
+     * has hydrated, so its first render is the server's.
+     */
+    private tellTurns;
     private readonly handleSlotChange;
     private readonly handleSettle;
     /**

package/dist/chat/root/chat-root.js

@@ -5,13 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessChat_1;
-import { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { FAILED_LABEL } from '../message/chat-message.js';
+import { TURN_WORDS } from '../naming.js';
 const REGIONS = ['header', 'actions', 'resume', 'status', 'composer'];
 const SECOND_NAMES = {
     author: {
@@ -39,11 +40,14 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.history = '';
         this.historyText = 'Loading earlier messages';
         this.label = '';
+        this.meLabel = 'You';
+        this.messageLabel = '{author}, {time}';
         this.threshold = 48;
         this.turns = [];
         this.pinnedState = undefined;
         this.announcement = '';
         this.said = 0;
+        this.words = TURN_WORDS;
         this.watcher = undefined;
         this.settling = undefined;
         this.grower = undefined;
@@ -361,6 +365,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Conversation', role: 'region' });
+        if (changed.has('meLabel') || changed.has('messageLabel')) {
+            this.words = { me: this.meLabel, sentence: this.messageLabel };
+        }
         this.countRegions();
         if (changed.has('history')) {
             this.asked = false;
@@ -389,6 +396,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     updated(changed) {
         super.updated(changed);
         this.assign();
+        this.tellTurns();
         if (this.pinned) {
             this.stick();
         }
@@ -403,6 +411,13 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.reachHistory();
         this.announce();
     }
+    tellTurns() {
+        for (const message of this.messages) {
+            whenHydrated(message, () => {
+                message.turnWords = this.words;
+            });
+        }
+    }
     renderTurns() {
         const { after, before, first, last } = this.virtualize.window;
         const message = this.tag('chat-message');
@@ -414,7 +429,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
                 meta: message-meta, retry: message-retry, sources: message-sources,
                 state: message-state, time: message-time${secondNames(SECOND_NAMES.author, turn.author)}${secondNames(SECOND_NAMES.state, turn.state)}"
               author=${turn.author ?? nothing}
+              author-label=${turn.authorLabel ?? nothing}
               at=${turn.at ?? nothing}
+              .turnWords=${this.words}
               state=${turn.state ?? nothing}
             >${turn.text}</${message}>
           </div>`)}
@@ -469,6 +486,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessChat.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'me-label' })
+], HelixHeadlessChat.prototype, "meLabel", void 0);
+__decorate([
+    property({ attribute: 'message-label' })
+], HelixHeadlessChat.prototype, "messageLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessChat.prototype, "pinned", null);

package/dist/code-block/root/code-block-root.d.ts

@@ -83,6 +83,10 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
     copiedLabel: string;
     /**
      * The copy button's name and tooltip text before a copy.
+     *
+     * Where the block has a name, the button says it too, such as "Copy code,
+     * app.ts", so each copy button on a page with several blocks is told apart.
+     * In a diff, that is each file's own name.
      */
     copyLabel: string;
     /**
@@ -207,8 +211,11 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * interpolated rather than written, so `tier` resolves it: this renders the
      * base button, and a styled subclass that sets `tier` renders the styled one
      * from the same template.
+     *
+     * @param value The text the button copies.
+     * @param name The name of what it copies, which its label carries.
      */
-    protected renderCopyButton(value?: string): TemplateResult;
+    protected renderCopyButton(value?: string, name?: string): TemplateResult;
     /** A number padded to the widest in its file, so the columns line up as text. */
     private renderNumber;
     private renderLine;

package/dist/code-block/root/code-block-root.js

@@ -83,13 +83,13 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     }
     renderHeader(name, value) {
         return name
-            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value)}</div>`
+            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value, name)}</div>`
             : nothing;
     }
-    renderCopy(value) {
-        return this.noCopy ? nothing : this.renderCopyButton(value);
+    renderCopy(value, name) {
+        return this.noCopy ? nothing : this.renderCopyButton(value, name);
     }
-    renderCopyButton(value = this.text) {
+    renderCopyButton(value = this.text, name = this.label) {
         return html `<${this.tag('copy-button')}
       part="copy"
       exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, tooltip: copy-tooltip,
@@ -98,7 +98,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       copied-label=${this.copiedLabel}
-      label=${this.copyLabel}
+      label=${name ? `${this.copyLabel}, ${name}` : this.copyLabel}
       .value=${value}
     ></${this.tag('copy-button')}>`;
     }