@fusion.dev/helix-headless 0.22.0 → 0.24.0

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

@@ -4,19 +4,61 @@ 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, HelixBeforePinEvent, HelixElement, hostAria, MixinCollection, requestChange, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+var HelixHeadlessChat_1;
+import { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, hostAria, MixinCollection, requestChange, VirtualizeController, } 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';
 const REGIONS = ['header', 'actions', 'resume', 'status', 'composer'];
+const settled = (turn) => turn.state !== 'sending' && turn.state !== 'streaming';
+const newsworthy = (turn) => turn.author !== 'me' || turn.state === 'failed';
+const spoken = (message) => [...message.childNodes]
+    .filter((node) => !(node.nodeType === 1 && node.hasAttribute('slot')))
+    .map((node) => node.textContent ?? '')
+    .join('')
+    .replace(/\s+/g, ' ')
+    .trim();
 let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
         this.defaultPinned = true;
+        this.history = '';
+        this.historyText = 'Loading earlier messages';
         this.label = '';
         this.threshold = 48;
+        this.turns = [];
         this.pinnedState = undefined;
+        this.announcement = '';
+        this.said = 0;
         this.watcher = undefined;
+        this.settling = undefined;
+        this.grower = undefined;
+        this.watched = [];
+        this.stuckAt = -1;
+        this.anchor = undefined;
+        this.asked = false;
+        this.opening = true;
+        this.newest = undefined;
+        this.pending = new Set();
+        this.virtualize = new VirtualizeController(this, {
+            container: () => (this.fed ? this.log : null),
+            count: () => this.turns.length,
+            estimate: () => HelixHeadlessChat_1.ESTIMATE,
+            rows: () => (this.fed ? this.drawn() : []),
+        });
         this.filled = undefined;
+        this.handleResize = () => {
+            if (this.pinned) {
+                this.stick();
+            }
+            else {
+                this.restore();
+            }
+            this.remember();
+        };
         this.handleResume = () => {
             this.resume();
         };
@@ -24,17 +66,30 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             this.assign();
             this.requestUpdate();
         };
+        this.handleSettle = () => {
+            this.requestUpdate();
+        };
         this.handleScroll = () => {
-            const wanted = this.atBottom;
-            if (wanted !== this.pinned) {
-                this.requestPinned(wanted);
+            const log = this.log;
+            if (this.pinned && log && log.scrollTop >= this.stuckAt - 1 && !this.atBottom) {
+                this.stick();
+            }
+            else {
+                const wanted = this.atBottom;
+                if (wanted !== this.pinned) {
+                    this.requestPinned(wanted);
+                }
             }
+            this.remember();
+            this.reachHistory();
         };
     }
+    static { HelixHeadlessChat_1 = this; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    static { this.ESTIMATE = 72; }
     get pinned() {
         return this.pinnedState ?? this.defaultPinned;
     }
@@ -46,8 +101,11 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     has(name) {
         return this.filled?.has(name) ?? true;
     }
+    get fed() {
+        return this.turns.length > 0;
+    }
     get messages() {
-        return [...(this.children ?? [])].filter((child) => 'isChatMessage' in child && child.isChatMessage === true);
+        return this.knownChildren.filter((child) => 'isChatMessage' in child && child.isChatMessage === true);
     }
     get log() {
         return this.renderRoot?.querySelector?.('[part="log"]') ?? null;
@@ -59,12 +117,49 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         }
         return log.scrollHeight - log.scrollTop - log.clientHeight <= Math.max(0, this.threshold);
     }
+    identity(turn) {
+        return turn?.key ?? turn;
+    }
+    drawn() {
+        return [...(this.renderRoot?.querySelectorAll?.('[part="turn"]') ?? [])].map((element) => ({ element, index: Number(element.dataset.index) }));
+    }
+    rendered() {
+        if (this.fed) {
+            return this.drawn().map(({ element, index }) => ({
+                element,
+                id: this.identity(this.turns[index]),
+            }));
+        }
+        return this.messages.map((element) => ({ element, id: element }));
+    }
+    heard() {
+        if (this.fed) {
+            return this.turns.map((turn) => ({
+                author: turn.author,
+                failed: FAILED_LABEL,
+                id: this.identity(turn),
+                state: turn.state,
+                text: turn.text,
+            }));
+        }
+        return this.messages.map((message) => ({
+            author: message.author,
+            failed: message.failedLabel,
+            id: message,
+            state: message.state,
+            text: spoken(message),
+        }));
+    }
     resume() {
+        this.stick();
+        this.requestPinned(true);
+    }
+    stick() {
         const log = this.log;
         if (log) {
             log.scrollTop = log.scrollHeight;
+            this.stuckAt = log.scrollTop;
         }
-        this.requestPinned(true);
     }
     requestPinned(next) {
         if (next === this.pinned) {
@@ -87,16 +182,25 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (!log?.assign) {
             return;
         }
-        const messages = this.messages;
-        log.assign(...messages);
-        const filled = new Set();
-        for (const name of REGIONS) {
-            const given = [...this.children].filter((child) => child.getAttribute('slot') === name);
-            root?.querySelector?.(`slot[name="${name}"]`)?.assign?.(...given);
-            if (given.length > 0) {
-                filled.add(name);
+        if (this.assignsByName) {
+            for (const turn of this.fed ? [] : this.messages) {
+                this.route(turn, 'messages');
             }
+            return;
+        }
+        log.assign(...(this.fed ? [] : this.messages));
+        for (const name of REGIONS) {
+            root?.querySelector?.(`slot[name="${name}"]`)?.assign?.(...this.given(name));
         }
+    }
+    given(name) {
+        return [...(this.children ?? [])].filter((child) => child.getAttribute('slot') === name);
+    }
+    countRegions() {
+        if (this.children === undefined || this.hydrating) {
+            return;
+        }
+        const filled = new Set(REGIONS.filter((name) => this.given(name).length > 0));
         const previous = this.filled;
         if (!previous ||
             previous.size !== filled.size ||
@@ -104,33 +208,201 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             this.filled = filled;
         }
     }
+    remember() {
+        const log = this.log;
+        const turns = this.rendered();
+        if (!log || turns.length === 0) {
+            this.anchor = undefined;
+            return;
+        }
+        const top = log.getBoundingClientRect().top;
+        let low = 0;
+        let high = turns.length - 1;
+        while (low < high) {
+            const middle = (low + high) >> 1;
+            if ((turns[middle]?.element.getBoundingClientRect().bottom ?? 0) > top) {
+                high = middle;
+            }
+            else {
+                low = middle + 1;
+            }
+        }
+        const found = turns[low];
+        this.anchor = found
+            ? { id: found.id, offset: found.element.getBoundingClientRect().top - top }
+            : undefined;
+    }
+    restore() {
+        const log = this.log;
+        const anchor = this.anchor;
+        if (!log || !anchor) {
+            return;
+        }
+        const found = this.rendered().find((turn) => turn.id === anchor.id);
+        if (!found) {
+            return;
+        }
+        const moved = found.element.getBoundingClientRect().top - log.getBoundingClientRect().top - anchor.offset;
+        if (Math.abs(moved) >= 1) {
+            log.scrollTop += moved;
+        }
+    }
+    reachHistory() {
+        const log = this.log;
+        if (this.opening || this.history !== 'more' || !log) {
+            return;
+        }
+        if (log.scrollTop > Math.max(0, this.threshold)) {
+            this.asked = false;
+            return;
+        }
+        if (!this.asked) {
+            this.asked = true;
+            this.dispatchEvent(new HelixHistoryEvent());
+        }
+    }
+    announce() {
+        const turns = this.heard();
+        if (this.opening) {
+            this.newest = turns.at(-1)?.id;
+            this.pending = new Set(turns.filter((turn) => !settled(turn)).map((turn) => turn.id));
+            return;
+        }
+        const fresh = this.arrived(turns);
+        const words = [];
+        for (const turn of turns) {
+            if (this.pending.has(turn.id) && settled(turn) && !fresh.includes(turn)) {
+                this.pending.delete(turn.id);
+                if (newsworthy(turn)) {
+                    words.push(this.phrase(turn));
+                }
+            }
+        }
+        for (const turn of fresh) {
+            if (!settled(turn)) {
+                this.pending.add(turn.id);
+            }
+            else if (newsworthy(turn)) {
+                words.push(this.phrase(turn));
+            }
+        }
+        if (this.pending.size > 0) {
+            const present = new Set(turns.map((turn) => turn.id));
+            this.pending = new Set([...this.pending].filter((id) => present.has(id)));
+        }
+        this.newest = turns.at(-1)?.id;
+        if (words.length > 0) {
+            this.announcement = words.join(' ');
+            this.said += 1;
+        }
+    }
+    arrived(turns) {
+        if (this.newest === undefined) {
+            return turns.length === 1 ? turns : [];
+        }
+        const at = turns.findIndex((turn) => turn.id === this.newest);
+        return at < 0 ? [] : turns.slice(at + 1);
+    }
+    phrase(turn) {
+        return turn.state === 'failed' ? `${turn.failed}: ${turn.text}` : turn.text;
+    }
+    watchSizes() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const log = this.log;
+        const targets = [...(log ? [log] : []), ...this.rendered().map((turn) => turn.element)];
+        if (targets.length === this.watched.length &&
+            targets.every((target, index) => target === this.watched[index])) {
+            return;
+        }
+        this.grower ??= new ResizeObserver(this.handleResize);
+        this.grower.disconnect();
+        for (const target of targets) {
+            this.grower.observe(target);
+        }
+        this.watched = targets;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.watcher = new MutationObserver(this.handleSlotChange);
         this.watcher.observe(this, { childList: true });
+        this.settling = new MutationObserver(this.handleSettle);
+        this.settling.observe(this, { attributeFilter: ['state'], subtree: true });
+        this.opening = true;
+        requestAnimationFrame(() => {
+            this.opening = false;
+            this.reachHistory();
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.watcher?.disconnect();
         this.watcher = undefined;
+        this.settling?.disconnect();
+        this.settling = undefined;
+        this.grower?.disconnect();
+        this.watched = [];
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Conversation', role: 'region' });
+        this.countRegions();
+        if (changed.has('history')) {
+            this.asked = false;
+        }
+        if (changed.has('turns')) {
+            this.follow(changed.get('turns'));
+        }
+    }
+    follow(previous) {
+        if (!previous?.length || this.turns.length === 0) {
+            return;
+        }
+        const first = this.identity(previous[0]);
+        const at = this.turns.findIndex((turn) => this.identity(turn) === first);
+        if (at > 0) {
+            this.virtualize.shift(at);
+        }
+        else if (at < 0) {
+            this.virtualize.forget();
+        }
     }
     updated(changed) {
         super.updated(changed);
         this.assign();
         if (this.pinned) {
-            const log = this.log;
-            if (log) {
-                log.scrollTop = log.scrollHeight;
-            }
+            this.stick();
         }
+        else {
+            this.restore();
+        }
+        if (this.fed) {
+            this.virtualize.measure();
+        }
+        this.watchSizes();
+        this.remember();
+        this.reachHistory();
+        this.announce();
+    }
+    renderTurns() {
+        const { after, before, first, last } = this.virtualize.window;
+        const message = this.tag('chat-message');
+        return html `<div part="before" role="presentation" style="block-size: ${before}px; flex: none"></div>
+      ${repeat(this.turns.slice(first, last), (turn, offset) => turn.key ?? first + offset, (turn, offset) => html `<div part="turn" data-index=${first + offset}>
+            <${message}
+              author=${turn.author ?? nothing}
+              at=${turn.at ?? nothing}
+              state=${turn.state ?? nothing}
+            >${turn.text}</${message}>
+          </div>`)}
+      <div part="after" role="presentation" style="block-size: ${after}px; flex: none"></div>`;
     }
     render() {
         const away = !this.pinned;
+        const fed = this.fed;
         const titled = this.has('header') || this.has('actions');
+        const busy = this.loading || this.history === 'loading';
         return html `<div part="header" ?hidden=${!titled}>
         <slot name="header"></slot>
         <span part="actions" ?hidden=${!this.has('actions')}>
@@ -140,14 +412,20 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
       <div
         part="log"
         role="log"
-        aria-live="polite"
+        aria-live="off"
         aria-label=${this.label || 'Conversation'}
-        aria-busy=${this.loading ? 'true' : nothing}
+        aria-busy=${busy ? 'true' : nothing}
+        ?data-windowed=${fed}
         @scroll=${this.handleScroll}
       >
+        ${this.history === 'loading'
+            ? html `<p part="history" role="status">${this.historyText}</p>`
+            : nothing}
+        ${fed ? this.renderTurns() : nothing}
         <slot name="messages" @slotchange=${this.handleSlotChange}></slot>
-        ${this.renderStatus(this.messages.length > 0)}
+        ${this.renderStatus(fed || this.messages.length > 0 || !this.childrenKnown)}
       </div>
+      <span part="live" role="status">${keyed(this.said, this.announcement)}</span>
       <div part="resume" ?hidden=${!away || !this.has('resume')} @click=${this.handleResume}>
         <slot name="resume"></slot>
       </div>
@@ -162,6 +440,12 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
 __decorate([
     property({ attribute: 'default-pinned', type: Boolean })
 ], HelixHeadlessChat.prototype, "defaultPinned", void 0);
+__decorate([
+    property()
+], HelixHeadlessChat.prototype, "history", void 0);
+__decorate([
+    property({ attribute: 'history-text' })
+], HelixHeadlessChat.prototype, "historyText", void 0);
 __decorate([
     property()
 ], HelixHeadlessChat.prototype, "label", void 0);
@@ -171,13 +455,22 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessChat.prototype, "threshold", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessChat.prototype, "turns", void 0);
 __decorate([
     state()
 ], HelixHeadlessChat.prototype, "pinnedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessChat.prototype, "announcement", void 0);
+__decorate([
+    state()
+], HelixHeadlessChat.prototype, "said", void 0);
 __decorate([
     state()
 ], HelixHeadlessChat.prototype, "filled", void 0);
-HelixHeadlessChat = __decorate([
+HelixHeadlessChat = HelixHeadlessChat_1 = __decorate([
     customElement('helix-headless-chat')
 ], HelixHeadlessChat);
 export { HelixHeadlessChat };

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -58,6 +58,8 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      * reports and does not patch up. A box that names itself keeps its own.
      */
     private sync;
+    /** Whether `seed` has had its one chance. */
+    private seeded;
     /**
      * Reads the boxes' own state into `value`, once, before anything is pushed.
      *

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -15,6 +15,7 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.boxes,
         });
+        this.seeded = false;
         this.handleToggle = (event) => {
             const target = event.target;
             const changed = this.boxes.find((box) => box === target);
@@ -77,11 +78,20 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
         this.internals.ariaRequired = this.required ? 'true' : null;
+        if (!this.seeded && this.children !== undefined && !this.hydrating) {
+            this.seeded = true;
+            if (this.value === '') {
+                this.seed();
+            }
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        if (this.value === '') {
-            this.seed();
+        if (!this.seeded && this.children !== undefined) {
+            this.seeded = true;
+            if (this.value === '') {
+                this.seed();
+            }
         }
     }
     validate() {

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

@@ -1 +1,2 @@
+export * from './patch.js';
 export * from './root/code-block-root.js';

package/dist/code-block/index.js

@@ -1 +1,2 @@
+export * from './patch.js';
 export * from './root/code-block-root.js';

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

@@ -0,0 +1,62 @@
+/**
+ * Reading a unified diff into the lines a reader sees.
+ *
+ * **This reads a diff and never computes one.** Which lines changed is the
+ * answer an algorithm gives, and consumers already have that algorithm where
+ * the two versions live, usually on a server: `git diff`, `diff -u`, a patch
+ * from a code host's API. Taking its output keeps the algorithm, and whatever it
+ * depends on, out of a component library. What is left is punctuation: a header
+ * per file, a `@@` per hunk, and a first character per line.
+ *
+ * **Line numbers come from the hunk headers**, so they are the file's numbers
+ * rather than the diff's, which is the only kind a reader can look up. A line
+ * that is not in a hunk is not in the output: file headers, `index` lines and
+ * `diff --git` are metadata, and a name is taken from them and nothing else.
+ */
+/** One line of a hunk, as the unified format marks it. */
+export interface DiffLine {
+    kind: 'added' | 'context' | 'removed';
+    /** The number on the old side, absent for a line that only the new side has. */
+    old?: number;
+    /** The number on the new side, absent for a line that only the old side has. */
+    new?: number;
+    text: string;
+}
+/** A `@@` header and the lines under it. */
+export interface DiffHunk {
+    header: string;
+    lines: DiffLine[];
+}
+/** Everything a patch says about one file. */
+export interface DiffFile {
+    /** The path, from `+++` or from `---` when the file was deleted. Empty when the patch has none. */
+    name: string;
+    hunks: DiffHunk[];
+}
+/** One row of a side-by-side view: a line on either side, or nothing there. */
+export interface DiffRow {
+    left?: DiffLine | undefined;
+    right?: DiffLine | undefined;
+}
+/**
+ * The files in a unified diff, each with its hunks.
+ *
+ * **A hunk is read to the counts its header states**, `@@ -12,7 +12,8 @@` being
+ * seven lines of the old file and eight of the new. That is what tells a
+ * removed line reading `-- note` from a file header, and a context line whose
+ * trailing space an editor stripped from the blank line that ends the patch.
+ *
+ * Lenient where the format is loose: a patch with no file headers is one
+ * nameless file, and `` is a note about the line
+ * before it rather than a line of its own, so it is dropped.
+ */
+export declare const parsePatch: (patch: string) => DiffFile[];
+/**
+ * A hunk's lines paired for a side-by-side view.
+ *
+ * Context sits on both sides. A run of removals followed by a run of additions
+ * is one change, and its lines are paired in order, the longer run's remainder
+ * standing opposite nothing: that is what lets the eye read a changed line
+ * across rather than hunting for it further down.
+ */
+export declare const pairLines: (lines: DiffLine[]) => DiffRow[];

package/dist/code-block/patch.js

@@ -0,0 +1,93 @@
+const HUNK = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/;
+const path = (line) => {
+    const raw = line.slice(4).split('\t')[0]?.trim() ?? '';
+    return raw === '/dev/null' ? '' : raw.replace(/^[ab]\//, '');
+};
+const dedent = (text) => {
+    const lines = text.split('\n');
+    const indents = lines
+        .filter((line) => line.trim() !== '')
+        .map((line) => /^[ \t]*/.exec(line)?.[0].length ?? 0);
+    const common = indents.length === 0 ? 0 : Math.min(...indents);
+    return common === 0 ? text : lines.map((line) => line.slice(common)).join('\n');
+};
+export const parsePatch = (patch) => {
+    const files = [];
+    let file;
+    let hunk;
+    let before = 0;
+    let after = 0;
+    let owed = { new: 0, old: 0 };
+    let from = '';
+    for (const line of dedent(patch.replace(/\r\n?/g, '\n')).split('\n')) {
+        if (hunk && (owed.old > 0 || owed.new > 0)) {
+            const mark = line[0];
+            const text = line.slice(1);
+            if (mark === '+') {
+                hunk.lines.push({ kind: 'added', new: after++, text });
+                owed.new -= 1;
+            }
+            else if (mark === '-') {
+                hunk.lines.push({ kind: 'removed', old: before++, text });
+                owed.old -= 1;
+            }
+            else if (mark === ' ' || line === '') {
+                hunk.lines.push({ kind: 'context', new: after++, old: before++, text });
+                owed = { new: owed.new - 1, old: owed.old - 1 };
+            }
+            continue;
+        }
+        if (line.startsWith('diff --git ')) {
+            file = undefined;
+            from = '';
+        }
+        else if (line.startsWith('--- ')) {
+            from = path(line);
+        }
+        else if (line.startsWith('+++ ')) {
+            file = { hunks: [], name: path(line) || from };
+            files.push(file);
+        }
+        else {
+            const header = HUNK.exec(line);
+            if (header) {
+                if (!file) {
+                    file = { hunks: [], name: from };
+                    files.push(file);
+                }
+                hunk = { header: line, lines: [] };
+                file.hunks.push(hunk);
+                before = Number(header[1]);
+                after = Number(header[3]);
+                owed = { new: Number(header[4] ?? 1), old: Number(header[2] ?? 1) };
+            }
+        }
+    }
+    return files;
+};
+export const pairLines = (lines) => {
+    const rows = [];
+    let at = 0;
+    while (at < lines.length) {
+        const line = lines[at];
+        if (line.kind === 'context') {
+            rows.push({ left: line, right: line });
+            at += 1;
+            continue;
+        }
+        const removed = [];
+        const added = [];
+        while (lines[at]?.kind === 'removed') {
+            removed.push(lines[at]);
+            at += 1;
+        }
+        while (lines[at]?.kind === 'added') {
+            added.push(lines[at]);
+            at += 1;
+        }
+        for (let row = 0; row < Math.max(removed.length, added.length); row += 1) {
+            rows.push({ left: removed[row], right: added[row] });
+        }
+    }
+    return rows;
+};