@ai-ecoverse/slicc-spectrum 1.22.0 → 1.22.2

package/dist/slicc-ui.js

@@ -16709,18 +16709,46 @@ var SliccChat = class extends ThemedElement {
       })
     ];
   }
+  #stuck = true;
+  #last = 0;
+  #resize = new ResizeObserver(() => this.#pin());
+  #log() {
+    return this.renderRoot.querySelector(".log");
+  }
+  #pin() {
+    if (!this.#stuck) return;
+    const log = this.#log();
+    log.scrollTop = log.scrollHeight;
+    this.#last = log.scrollTop;
+  }
+  #scroll = () => {
+    const log = this.#log();
+    if (log.scrollHeight - log.scrollTop - log.clientHeight < 48) this.#stuck = true;
+    else if (log.scrollTop < this.#last) this.#stuck = false;
+    this.#last = log.scrollTop;
+  };
   #refresh(jump) {
-    const log = this.renderRoot.querySelector(".log");
-    const stuck = !log || log.scrollHeight - log.scrollTop - log.clientHeight < 48;
+    if (jump) this.#stuck = true;
     this.requestUpdate();
-    void this.updateComplete.then(() => {
-      const next = this.renderRoot.querySelector(".log");
-      if (next && (jump || stuck)) next.scrollTop = next.scrollHeight;
-    });
+    void this.updateComplete.then(() => this.#pin());
   }
-  firstUpdated() {
+  #observe() {
+    const log = this.#log();
+    this.#resize.observe(log);
+    this.#resize.observe(log.firstElementChild);
     this.#refresh(true);
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) this.#observe();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#resize.disconnect();
+  }
+  firstUpdated() {
+    this.#observe();
+  }
   focus() {
     this.focusOn("slicc-composer");
   }
@@ -16815,7 +16843,7 @@ var SliccChat = class extends ThemedElement {
       <header>
         ${agent ? this.#meta(agent) : b`<span>No agent</span>`}
       </header>
-      <div class="log" role="log" aria-live="polite" aria-label="Conversation">
+      <div class="log" role="log" aria-live="polite" aria-label="Conversation" @scroll=${this.#scroll}>
         <div class="column">
           ${agent && messages.length > 0 ? this.#items(messages, agent) : b`<div class="empty">No messages yet. Ask ${agent?.name ?? "the agent"} something.</div>`}
         </div>
@@ -70164,6 +70192,10 @@ var css = `
 .mount {
   height: 100%;
 }
+
+file-tree-container {
+  color-scheme: inherit;
+}
 `;
 var SliccFileTree = class extends HTMLElement {
   static loaded = FileTreeContainerLoaded;