@syntrologie/adapt-chatbot 2.45.0 → 2.46.0

package/dist/{chunk-EKGGGUI2.js → chunk-7TT7YYML.js}

@@ -1,9 +1,10 @@
 import {
   renderMarkdown
-} from "./chunk-VZIUXXAM.js";
+} from "./chunk-TZA7572J.js";
 
 // src/AdaptiveChatTrail.ts
 import { css, html, LitElement, nothing } from "lit";
+import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 var DEFAULT_VISIBLE = 3;
@@ -301,6 +302,7 @@ var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
       data-trail-thinking
       data-role="assistant"
       data-status="thinking"
+      aria-live="off"
       aria-label=${// The accessible name is the sentence on screen. When the dots are the
     // only visual there is no sentence to mirror, so name the state with
     // the SAME verb the visible copy uses ("typing", not "thinking").
@@ -624,9 +626,31 @@ var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
       >
     </button>`;
   }
+  /**
+   * The conversation live region.
+   *
+   * Always rendered, in EVERY branch of `render()` — including the ones that
+   * paint no transcript at all. A live region must already be in the DOM when
+   * its first child arrives; one created in the same mutation as its content
+   * is not reliably announced by NVDA or JAWS (adversarial review I3), and the
+   * content that would be lost is the assistant's first reply of the session.
+   *
+   * `display: contents` means it contributes no box and no layout anywhere it
+   * is mounted, so it is safe to place in an empty-state hero or in the flex
+   * scroll container alike. In the empty states it is rendered LAST so it can
+   * never become the `:first-child` any layout rule targets.
+   */
+  _renderConversationLog(children) {
+    return html`<div
+      data-syntro-chat-log
+      role="log"
+      aria-label="Conversation"
+      style="display:contents"
+    >${children}</div>`;
+  }
   render() {
     if (this.messages.length === 0 && !this.greeting && !this.introSuggestion && this.tileReceipts.length === 0 && this.inlineWidgets.length === 0)
-      return nothing;
+      return this._renderConversationLog(nothing);
     if (this.messages.length === 0 && (this.greeting || this.introSuggestion)) {
       return html`<div data-syntro-chat-trail data-state="empty" style=${styleMap({
         display: "flex",
@@ -660,6 +684,7 @@ var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
               >${this.introSuggestion.label}</button>` : nothing}
         ${this._renderReceiptStrip(this.tileReceipts)}
         ${this._renderInlineWidgetStrip(this.inlineWidgets)}
+        ${this._renderConversationLog(nothing)}
       </div>`;
     }
     if (this.messages.length === 0 && (this.tileReceipts.length > 0 || this.inlineWidgets.length > 0)) {
@@ -674,6 +699,7 @@ var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
       })}>
         ${this._renderReceiptStrip(this.tileReceipts)}
         ${this._renderInlineWidgetStrip(this.inlineWidgets)}
+        ${this._renderConversationLog(nothing)}
       </div>`;
     }
     let turnReplies = [];
@@ -809,39 +835,11 @@ var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
       position: "relative",
       width: "100%"
     };
-    return html`
-      ${// Single toggle button above the frame. Same DOM node morphs:
-    //   collapsed → "↑ N more · expand" / "↑ expand"  (calls _onExpand)
-    //   expanded  → "⌄ minimize"                       (calls _onCollapse)
-    // Lives OUTSIDE the frame so the absolute blur veil (top:0,
-    // z-index:2 inside the frame) doesn't cover it. Shown whenever
-    // there's anything in the trail — the user expects this affordance
-    // available regardless of how many chips are on screen.
-    // When ``forceExpanded`` is set by the host (full-screen panel,
-    // etc.), there's nowhere to collapse INTO and the affordance
-    // would just confuse the user — suppress it entirely.
-    this.messages.length === 0 || this.forceExpanded ? nothing : this.expanded ? html`<button
-                type="button"
-                data-trail-toggle
-                data-trail-collapse
-                @click=${this._onCollapse}
-                style=${styleMap(moreStyles())}
-              >⌄ minimize</button>` : html`<button
-                type="button"
-                data-trail-toggle
-                data-trail-more
-                @click=${this._onExpand}
-                style=${styleMap(moreStyles())}
-              >${hidden > 0 ? html`↑ ${hidden} more · expand` : html`↑ expand`}</button>`}
-      <div data-syntro-chat-trail-frame style=${styleMap(frameStyles)}>
-      <div
-        data-syntro-chat-trail
-        style=${styleMap(containerStyles)}
-        @scroll=${this._onTrailScroll}
-        @wheel=${this._markUserScrollIntent}
-        @touchmove=${this._markUserScrollIntent}
-      >
-        ${visible.map((m, i) => {
+    const isStreamingMsg = (m) => m.role === "assistant" && m.status === "streaming";
+    const lastVisible = visible[visible.length - 1];
+    const streamingTail = lastVisible !== void 0 && isStreamingMsg(lastVisible);
+    const strandedStreaming = (m, i) => isStreamingMsg(m) && !(streamingTail && i === visible.length - 1);
+    const renderChip = (m, i) => {
       const pos = this.expanded || this.forceExpanded ? 0 : visible.length - 1 - i;
       const state = chipVisualState(m);
       const isStreaming = state.kind === "streaming";
@@ -861,61 +859,112 @@ var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
         animation: "syntro-trail-chip-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both"
       } : chipStyles(state, pos);
       const personaByline = this.personaName && this._isAssistantTurnStart(m) ? html`<div data-trail-persona-byline style=${styleMap(personaBylineStyles())}>
-                  ${this.personaAvatarSm ? html`<img
-                          data-trail-persona-avatar
-                          src=${this.personaAvatarSm}
-                          alt=""
-                          style=${styleMap(personaAvatarStyles())}
-                        />` : nothing}<span>${this.personaName}</span>
-                </div>` : nothing;
+              ${this.personaAvatarSm ? html`<img
+                      data-trail-persona-avatar
+                      src=${this.personaAvatarSm}
+                      alt=""
+                      style=${styleMap(personaAvatarStyles())}
+                    />` : nothing}<span>${this.personaName}</span>
+            </div>` : nothing;
       return html`<div
-              data-trail-chip
-              data-trail-chip-id=${String(m.id)}
-              data-role=${m.role}
-              data-status=${m.status ?? "complete"}
-              style=${styleMap(chipStyle)}
-            >${personaByline}${renderedText}${isStreaming ? html`<span
-                    data-trail-caret
-                    aria-hidden="true"
-                    style=${styleMap(caretStyles())}
-                  ></span>` : nothing}${toolCalls.length > 0 ? html`<div data-trail-toolcalls style=${styleMap(toolCallStripStyles())}>
-                    ${toolCalls.map(
+          data-trail-chip
+          data-trail-chip-id=${String(m.id)}
+          data-role=${m.role}
+          data-status=${m.status ?? "complete"}
+          aria-hidden=${strandedStreaming(m, i) ? "true" : nothing}
+          ?inert=${strandedStreaming(m, i)}
+          style=${styleMap(chipStyle)}
+        >${personaByline}${renderedText}${isStreaming ? html`<span
+                data-trail-caret
+                aria-hidden="true"
+                style=${styleMap(caretStyles())}
+              ></span>` : nothing}${toolCalls.length > 0 ? html`<div data-trail-toolcalls style=${styleMap(toolCallStripStyles())}>
+                ${toolCalls.map(
         (tc) => html`<button
-                        type="button"
-                        data-trail-toolcall
-                        data-tool-id=${tc.id}
-                        data-tool-status=${tc.status}
-                        @click=${() => this._onToolCallClick(tc)}
-                        style=${styleMap(pendingToolCallChipStyles())}
-                        title="${tc.name} · ${tc.status}"
-                      >? ${tc.name}</button>`
+                    type="button"
+                    data-trail-toolcall
+                    data-tool-id=${tc.id}
+                    data-tool-status=${tc.status}
+                    @click=${() => this._onToolCallClick(tc)}
+                    style=${styleMap(pendingToolCallChipStyles())}
+                    title="${tc.name} · ${tc.status}"
+                  >? ${tc.name}</button>`
       )}
-                  </div>` : nothing}${receipts.length > 0 ? html`<div data-trail-receipts style=${styleMap(receiptStripStyles())}>
-                    ${receipts.map(
+              </div>` : nothing}${receipts.length > 0 ? html`<div data-trail-receipts style=${styleMap(receiptStripStyles())}>
+                ${receipts.map(
         (r) => html`<div
-                        data-trail-receipt
-                        data-receipt-type=${r.type}
-                        style=${styleMap(receiptStyles())}
-                      ><span aria-hidden="true" style=${styleMap(receiptIconStyles())}>✓</span
-                        ><span>${receiptText(r)}</span></div>`
+                    data-trail-receipt
+                    data-receipt-type=${r.type}
+                    style=${styleMap(receiptStyles())}
+                  ><span aria-hidden="true" style=${styleMap(receiptIconStyles())}>✓</span
+                    ><span>${receiptText(r)}</span></div>`
       )}
-                  </div>` : nothing}${replyChips.length > 0 ? html`<div data-trail-reply-chips style=${styleMap(replyChipStripStyles())}>
-                    ${replyChips.map(
+              </div>` : nothing}${replyChips.length > 0 ? html`<div data-trail-reply-chips style=${styleMap(replyChipStripStyles())}>
+                ${replyChips.map(
         (reply) => html`<button
-                        type="button"
-                        data-trail-reply-chip
-                        @click=${() => this._onSuggestedReplyClick(reply)}
-                        style=${styleMap(replyChipStyles())}
-                      >${reply}</button>`
+                    type="button"
+                    data-trail-reply-chip
+                    @click=${() => this._onSuggestedReplyClick(reply)}
+                    style=${styleMap(replyChipStyles())}
+                  >${reply}</button>`
       )}
-                  </div>` : nothing}</div>${// Receipt chips that mounted while THIS message was newest render
+              </div>` : nothing}</div>${// Receipt chips that mounted while THIS message was newest render
       // inline right here, so they read as part of the flow and drift up
       // as later messages append below them.
       this._renderReceiptStrip(receiptsByAnchor.get(m.id) ?? [])}${// Inline widgets (reco carousel) anchored to this message render
       // right here in the conversation flow — the whole point of the
       // chat-inline slot: visible in the trail, not behind the panel.
       this._renderInlineWidgetStrip(inlineByAnchor.get(m.id) ?? [])}`;
-    })}
+    };
+    const committed = streamingTail ? visible.slice(0, -1) : visible;
+    const committedChips = repeat(
+      committed,
+      (m) => m.id,
+      (m, i) => renderChip(m, i)
+    );
+    const streamingChip = streamingTail ? renderChip(lastVisible, visible.length - 1) : nothing;
+    return html`
+      ${// Single toggle button above the frame. Same DOM node morphs:
+    //   collapsed → "↑ N more · expand" / "↑ expand"  (calls _onExpand)
+    //   expanded  → "⌄ minimize"                       (calls _onCollapse)
+    // Lives OUTSIDE the frame so the absolute blur veil (top:0,
+    // z-index:2 inside the frame) doesn't cover it. Shown whenever
+    // there's anything in the trail — the user expects this affordance
+    // available regardless of how many chips are on screen.
+    // When ``forceExpanded`` is set by the host (full-screen panel,
+    // etc.), there's nowhere to collapse INTO and the affordance
+    // would just confuse the user — suppress it entirely.
+    this.messages.length === 0 || this.forceExpanded ? nothing : this.expanded ? html`<button
+                type="button"
+                data-trail-toggle
+                data-trail-collapse
+                @click=${this._onCollapse}
+                style=${styleMap(moreStyles())}
+              >⌄ minimize</button>` : html`<button
+                type="button"
+                data-trail-toggle
+                data-trail-more
+                @click=${this._onExpand}
+                style=${styleMap(moreStyles())}
+              >${hidden > 0 ? html`↑ ${hidden} more · expand` : html`↑ expand`}</button>`}
+      <div data-syntro-chat-trail-frame style=${styleMap(frameStyles)}>
+      <div
+        data-syntro-chat-trail
+        style=${styleMap(containerStyles)}
+        @scroll=${this._onTrailScroll}
+        @wheel=${this._markUserScrollIntent}
+        @touchmove=${this._markUserScrollIntent}
+      >
+        <!-- Committed transcript. Rendered UNCONDITIONALLY, even empty: a live
+             region has to be in the DOM before its first child arrives or the
+             announcement is dropped (review I3), and the first assistant reply
+             of a session is exactly the one that matters. display:contents
+             keeps the scroll container's flex layout byte-identical — the
+             wrapper is a semantic node only, which is why the bottom-anchor
+             rule reaches through it, and past it while it is still empty. -->
+        ${this._renderConversationLog(committedChips)}
+        ${// The in-flight reply: same slot on screen, outside the log.
+    streamingChip}
         ${// Thinking indicator — fills the gap between the user's
     // most recent message and the assistant's first token.
     // Shows when chatSession.inFlight is true AND the last
@@ -992,6 +1041,22 @@ _AdaptiveChatTrail.styles = css`
     [data-syntro-chat-trail]:not([data-state="empty"]) > :first-child {
       margin-top: auto;
     }
+    /* …and THROUGH the conversation-log wrapper. That wrapper is
+       display: contents (a semantic node carrying role=log, see render), so
+       margin on it does nothing — the auto margin has to land on the first
+       real chip inside it or a short thread floats to the top of a tall
+       panel instead of hugging the composer. */
+    [data-syntro-chat-trail]:not([data-state="empty"]) > [data-syntro-chat-log] > :first-child {
+      margin-top: auto;
+    }
+    /* …and PAST it while it is still empty. The wrapper is always rendered (it
+       is a live region, which must pre-exist its content), so with only an
+       in-flight reply on screen the wrapper IS the :first-child and has no box
+       to carry the margin. :empty ignores comment nodes, so Lit's own markers
+       inside the wrapper do not defeat it. */
+    [data-syntro-chat-trail]:not([data-state="empty"]) > [data-syntro-chat-log]:empty + * {
+      margin-top: auto;
+    }
     [data-trail-chip] > p:first-child {
       margin-top: 0;
     }
@@ -1766,4 +1831,4 @@ export {
   AdaptiveChatTrail,
   looksLikeSerializedModelResponse
 };
-//# sourceMappingURL=chunk-EKGGGUI2.js.map
+//# sourceMappingURL=chunk-7TT7YYML.js.map