@clowder-ai/companion 0.1.0-alpha.26 → 0.1.0-alpha.27

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.27",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clowder-ai/companion",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.27",
   "description": "The desktop voice body for your Clowder companion",
   "license": "MIT",
   "type": "module",

package/plugin.yaml

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.27",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {

package/renderer/conversation-surface.mjs

@@ -18,6 +18,7 @@ export class ConversationSurface {
     this.pendingOlderRead = false;
     this.bodyReads = new Set();
     this.replyMode = 'idle';
+    this.historySelection = null;
     this.controller = new ReplyLetterController({
       requestContinuation: value => void this.readBody(value.messageId, value.continuation),
       render: value => this.renderReply(value),
@@ -59,14 +60,27 @@ export class ConversationSurface {
         void this.readOlderHistory();
       }
     });
+    this.$('chat-transcript').addEventListener('wheel', event => {
+      if (event.deltaY < 0 && this.controller.mode === 'history'
+        && this.$('chat-transcript').scrollTop <= 0) void this.readOlderHistory();
+    }, { passive: true });
     this.$('compose').onsubmit = event => this.submit(event);
   }
 
   renderReply(value) {
     const previous = this.replyMode;
+    const previousSelection = this.historySelection;
+    if (previous === 'history' && value.mode !== 'history') {
+      this.transcript.leaveHistory(previousSelection);
+    }
     this.replyMode = value.mode;
     this.view.render(value);
     this.controls.remeasure?.();
+    if (value.mode === 'history'
+      && (previous !== 'history' || previousSelection !== value.selectedMessageId)) {
+      this.transcript.enterHistory(value.selectedMessageId);
+    }
+    this.historySelection = value.mode === 'history' ? value.selectedMessageId : null;
     if (value.mode === 'reply' && previous !== 'reply' && this.controls.panel !== 'chat') {
       void this.controls.show('chat');
     }

package/renderer/transcript-view.mjs

@@ -6,6 +6,8 @@ export class TranscriptView {
     this.activeRows = new Map();
     this.historyRows = new Map();
     this.completed = new Set();
+    this.savedHistoryViewport = null;
+    this.pendingHistoryEntry = null;
   }
   append(role, text, chunk = false) {
     const pinned = this.nearBottom();
@@ -33,7 +35,8 @@ export class TranscriptView {
     if (pinned) this.container.scrollTop = this.container.scrollHeight;
   }
   nearBottom() {
-    return this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < 32;
+    return !this.container.hidden
+      && this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < 32;
   }
   visibleHistoryAnchor() {
     const viewport = this.container.getBoundingClientRect?.();
@@ -45,15 +48,75 @@ export class TranscriptView {
     }
     return null;
   }
+  restoreHistoryAnchor(anchor, readingPosition, useFirstAvailable = false) {
+    const row = this.historyRows.get(anchor?.id)
+      ?? (useFirstAvailable ? this.historyRows.values().next().value : null);
+    const rect = row?.getBoundingClientRect?.();
+    const viewport = this.container.getBoundingClientRect?.();
+    if (!rect || !viewport || viewport.bottom <= viewport.top) {
+      this.container.scrollTop = readingPosition;
+      return false;
+    }
+    this.container.scrollTop += rect.top - viewport.top - anchor.offset;
+    return true;
+  }
+  revealHistoryRow(id) {
+    const row = this.historyRows.get(id);
+    const rect = row?.getBoundingClientRect?.();
+    const viewport = this.container.getBoundingClientRect?.();
+    if (!rect || !viewport || viewport.bottom <= viewport.top) return false;
+    if (rect.top >= viewport.top && rect.bottom <= viewport.bottom) return true;
+    const viewportHeight = viewport.bottom - viewport.top;
+    const rowHeight = Math.max(0, rect.bottom - rect.top);
+    const offset = Math.max(0, (viewportHeight - rowHeight) / 2);
+    this.container.scrollTop += rect.top - viewport.top - offset;
+    return true;
+  }
+  placeHistoryEntry(afterLoad) {
+    if (!this.pendingHistoryEntry || this.container.hidden) return false;
+    const viewport = this.pendingHistoryEntry;
+    if (viewport.anchor && this.restoreHistoryAnchor(viewport.anchor, viewport.scrollTop)) {
+      this.pendingHistoryEntry = null;
+      return true;
+    }
+    if (viewport.selectedMessageId && this.revealHistoryRow(viewport.selectedMessageId)) {
+      this.pendingHistoryEntry = null;
+      return true;
+    }
+    const bounds = this.container.getBoundingClientRect?.();
+    if (!afterLoad || !bounds || bounds.bottom <= bounds.top) return false;
+    this.container.scrollTop = this.container.scrollHeight;
+    this.pendingHistoryEntry = null;
+    return true;
+  }
+  leaveHistory(selectedMessageId) {
+    this.savedHistoryViewport = {
+      selectedMessageId,
+      anchor: this.visibleHistoryAnchor(),
+      scrollTop: this.container.scrollTop,
+    };
+    this.pendingHistoryEntry = null;
+  }
+  enterHistory(selectedMessageId) {
+    const saved = this.savedHistoryViewport?.selectedMessageId === selectedMessageId
+      ? this.savedHistoryViewport : null;
+    this.pendingHistoryEntry = {
+      selectedMessageId,
+      anchor: saved?.anchor ?? null,
+      scrollTop: saved?.scrollTop ?? this.container.scrollTop,
+    };
+    this.placeHistoryEntry(false);
+  }
   reset() {
     for (const row of this.activeRows.values()) row.remove();
     this.activeRows.clear();
     this.completed.clear();
   }
   load(messages) {
-    const pinned = this.nearBottom();
+    const hidden = this.container.hidden;
+    const pinned = !hidden && this.nearBottom();
     const readingPosition = this.container.scrollTop;
-    const anchor = pinned ? null : this.visibleHistoryAnchor();
+    const anchor = hidden || pinned ? null : this.visibleHistoryAnchor();
     const previous = this.historyRows;
     this.historyRows = new Map();
     const rows = messages.map(message => {
@@ -81,14 +144,10 @@ export class TranscriptView {
       return row;
     });
     this.container.replaceChildren(...rows, ...this.activeRows.values());
-    if (pinned) this.container.scrollTop = this.container.scrollHeight;
-    else if (anchor) {
-      const row = this.historyRows.get(anchor.id) ?? rows[0];
-      const rect = row?.getBoundingClientRect?.();
-      const viewport = this.container.getBoundingClientRect?.();
-      this.container.scrollTop = rect && viewport
-        ? this.container.scrollTop + rect.top - viewport.top - anchor.offset
-        : readingPosition;
-    } else this.container.scrollTop = readingPosition;
+    if (hidden) this.container.scrollTop = readingPosition;
+    else if (this.placeHistoryEntry(true)) return;
+    else if (pinned) this.container.scrollTop = this.container.scrollHeight;
+    else if (anchor) this.restoreHistoryAnchor(anchor, readingPosition, true);
+    else this.container.scrollTop = readingPosition;
   }
 }