@ai-ecoverse/slicc-spectrum 2.0.3 → 2.1.0

package/dist/slicc-ui.js

@@ -37451,6 +37451,16 @@ var SliccChat = class _SliccChat extends ThemedElement {
         background: var(--swc-background-elevated-color);
         box-shadow: var(--swc-drop-shadow-elevated);
       }
+      .older {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--swc-spacing-100);
+        min-block-size: var(--swc-component-height-100);
+        margin-block-end: var(--swc-spacing-200);
+        font-size: var(--swc-font-size-100);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
       .empty {
         color: var(--swc-neutral-subdued-content-color-default);
         text-align: center;
@@ -37556,7 +37566,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
   #tick;
   #tail = "";
   #held = "";
-  #mark = 0;
+  #mark = "";
   #all = false;
   #seen = "";
   #focused = (event2) => {
@@ -37605,7 +37615,75 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const log = this.#log();
     if (!this.#stuck && log.scrollHeight <= log.clientHeight) this.#follow();
     else this.#pin(false);
+    this.#check();
   });
+  #paging = /* @__PURE__ */ new Set();
+  #stopped = /* @__PURE__ */ new Map();
+  #shown = { agent: "", head: "" };
+  #anchor = null;
+  #first(id) {
+    return id && this.model?.agent.messages(id)[0]?.id || "";
+  }
+  #check() {
+    const log = this.#log();
+    if (log.scrollTop < log.clientHeight) void this.#earlier();
+  }
+  async #earlier() {
+    const agent = this.model?.agent;
+    const id = this.#id();
+    const head = this.#first(id);
+    if (!agent?.hasOlder?.(id) || this.#paging.has(id) || this.#stopped.get(id)?.head === head)
+      return;
+    this.#paging.add(id);
+    this.requestUpdate();
+    try {
+      const found = await agent.older(id, head);
+      const now = this.#first(id);
+      if (!found.length || now === head) this.#stopped.set(id, { head: now, failed: false });
+    } catch {
+      this.#stopped.set(id, { head, failed: true });
+    }
+    this.#paging.delete(id);
+    this.requestUpdate();
+    await this.updateComplete;
+    if (this.#id() === id) this.#check();
+  }
+  #retry(id) {
+    this.#log().focus({ preventScroll: true });
+    this.#stopped.delete(id);
+    void this.#earlier();
+  }
+  #keep(agent) {
+    const log = this.#log();
+    const top = log.getBoundingClientRect().top;
+    const card2 = [...log.querySelector("swc-conversation-thread")?.children ?? []].find(
+      (child) => !child.matches(".day") && child.getBoundingClientRect().bottom > top
+    );
+    return {
+      agent,
+      card: card2,
+      offset: card2 ? card2.getBoundingClientRect().top - top : 0,
+      top: log.scrollTop,
+      height: log.scrollHeight
+    };
+  }
+  #restore() {
+    const { agent, card: card2, offset: offset3, top, height } = this.#anchor;
+    this.#anchor = null;
+    if (agent !== this.#id()) return;
+    const log = this.#log();
+    log.scrollTop = card2?.isConnected ? log.scrollTop + card2.getBoundingClientRect().top - log.getBoundingClientRect().top - offset3 : top + log.scrollHeight - height;
+    this.#last = log.scrollTop;
+    this.#height = log.scrollHeight;
+  }
+  #olderRow(id, head) {
+    const stop = this.#stopped.get(id);
+    if (stop?.failed && stop.head === head)
+      return b`<div class="older" role="alert" data-older="failed"><span>Couldn’t load earlier messages.</span><swc-action-button size="s" quiet data-action="retry-older" @click=${() => this.#retry(id)}>Retry</swc-action-button></div>`;
+    const paging = this.#paging.has(id);
+    if (!paging && (!this.model?.agent.hasOlder?.(id) || stop?.head === head)) return A;
+    return b`<div class="older" role="status" data-older="loading" aria-busy=${paging ? "true" : "false"}>Loading earlier messages…</div>`;
+  }
   #fitted;
   #fit = new ResizeObserver(([entry]) => {
     this.style.setProperty("--composer-height", `${entry.target.offsetHeight}px`);
@@ -37663,6 +37741,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
       this.#stuck = false;
     this.#last = log.scrollTop;
     this.#height = log.scrollHeight;
+    this.#check();
   };
   #intent = {
     passive: true,
@@ -37725,6 +37804,17 @@ var SliccChat = class _SliccChat extends ThemedElement {
     clearInterval(this.#tick);
     this.#tick = void 0;
   }
+  willUpdate(changed2) {
+    super.willUpdate(changed2);
+    const id = this.#id();
+    const head = this.#first(id);
+    const shown5 = this.#shown;
+    if (this.hasUpdated && !this.#anchor && id === shown5.agent && shown5.head && head !== shown5.head) {
+      this.#anchor = this.#keep(id);
+      requestAnimationFrame(() => this.#restore());
+    }
+    this.#shown = { agent: id, head };
+  }
   updated() {
     this.#attach();
     const timed = this.isConnected && this.#timed();
@@ -38017,12 +38107,25 @@ var SliccChat = class _SliccChat extends ThemedElement {
     this.#seen = id;
     this.#all = false;
     this.#details.clear();
+    this.#stopped.delete(id);
   }
   #probe() {
     if (this.#handlers.surface || this.#probed === this.color) return;
     this.#probed = this.color;
     this.#handlers.surface = readSurface(this.renderRoot);
   }
+  #thread(items, older, blank2) {
+    if (items.length)
+      return b`<swc-conversation-thread>${c(
+        items,
+        ([key]) => key,
+        ([, item2]) => item2
+      )}</swc-conversation-thread>`;
+    if (this.model?.tabs?.state().role === "connecting")
+      return b`<div class="empty" data-connecting>${connecting}</div>`;
+    if (this.model?.agent.starting?.() || older) return A;
+    return b`<div class="empty" data-empty>${blank2}</div>`;
+  }
   render() {
     this.#handlers.color = this.color;
     this.#handlers.model = this.model ?? null;
@@ -38037,8 +38140,10 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const messages = agent ? this.model?.agent.messages(agent.id) ?? [] : [];
     this.#tail = messages.at(-1)?.id ?? "";
     const { items, asks } = dock(agent ? this.#items(messages, agent) : [], messages, seat);
-    const count2 = items.filter(([key]) => !key.startsWith("day:")).length;
-    if (!this.behind) this.#mark = count2;
+    const keys = items.flatMap(([key]) => key.startsWith("day:") ? [] : [key]);
+    if (!this.behind) this.#mark = keys.at(-1) ?? "";
+    const seen = keys.lastIndexOf(this.#mark);
+    const older = agent ? this.#olderRow(agent.id, messages[0]?.id ?? "") : A;
     return b`
       <header ?data-compact=${this.compact}>
         ${agent ? this.#meta(agent, !messages.length) : this.#agentless()}
@@ -38060,14 +38165,11 @@ var SliccChat = class _SliccChat extends ThemedElement {
           @pointerdown=${this.#hold}
         >
           <div class="column" @keydown=${this.#keys}>
-            ${items.length ? b`<swc-conversation-thread>${c(
-      items,
-      ([key]) => key,
-      ([, item2]) => item2
-    )}</swc-conversation-thread>` : this.model?.tabs?.state().role === "connecting" ? b`<div class="empty" data-connecting>${connecting}</div>` : this.model?.agent.starting?.() ? A : b`<div class="empty" data-empty>${empty3(watch2, seat, agent?.name ?? "the agent")}</div>`}
+            ${older}
+            ${this.#thread(items, older !== A, empty3(watch2, seat, agent?.name ?? "the agent"))}
           </div>
         </div>
-        ${this.behind ? this.#latest(count2 - this.#mark) : A}
+        ${this.behind ? this.#latest(seen < 0 ? 0 : keys.length - 1 - seen) : A}
       </div>
       ${this.dropping ? b`<swc-dropzone dragged size="l" aria-label="Attach files" dragged-message="" data-surface="drop">
               <swc-illustrated-message>