@jskit-ai/assistant-core 0.1.180 → 0.1.181

package/examples/conversation/package.json

@@ -8,14 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.180",
-    "@jskit-ai/http-runtime": "0.1.200",
-    "@jskit-ai/kernel": "0.1.202",
+    "@jskit-ai/assistant-core": "0.1.181",
+    "@jskit-ai/http-runtime": "0.1.201",
+    "@jskit-ai/kernel": "0.1.203",
     "@mdi/js": "^7.4.47",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0",
-    "@jskit-ai/connectors-core": "0.1.19",
-    "@jskit-ai/connectors-catalog": "0.1.19"
+    "@jskit-ai/connectors-core": "0.1.20",
+    "@jskit-ai/connectors-catalog": "0.1.20"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/fixtures/responsive-assistant/App.vue

@@ -7,6 +7,7 @@ const draft = ref("");
 const query = new URLSearchParams(location.search);
 const controls = query.has("controls");
 const deferredHistory = query.has("history");
+const pagedHistory = query.has("paged-history");
 const streaming = query.has("streaming");
 const liveText = ref("");
 const liveMessage = computed(() => ({ messageId: "stream-answer", role: "assistant", text: liveText.value, status: "inProgress" }));
@@ -16,11 +17,18 @@ const loadMoreError = ref("");
 const historyRequests = ref(0);
 const hasMoreBefore = ref(controls);
 let completeHistory = null;
+function historyPage(first) {
+  return Array.from({ length: 20 }, (_, index) => ["user", "assistant"].map(role => ({
+    id: `${role}-${first + index}`, role, status: "completed",
+    text: `${role} message ${first + index}. A deliberately detailed update keeps the conversation tall enough to exercise the real overflow container.`
+  }))).flat();
+}
 const messages = ref(Array.from({ length: 70 }, (_, index) => ({
   id: `message-${index}`, role: index % 2 ? "assistant" : "user", status: "completed",
   text: `Conversation line ${index + 1}: responsive scroll containment keeps the composer visible.\n\nMore text with **formatting**, a [link](https://example.com), and a_long_word_that_must_wrap_in_narrow_panes_without_overflow.`
 })));
 if (controls) messages.value[0].text = messages.value[0].text.repeat(4);
+if (pagedHistory) messages.value = historyPage(21);
 if (streaming) messages.value.push({ id: "stream-question", role: "user", text: "Show the answer as it arrives." });
 function finishStream() {
   messages.value.push({ ...liveMessage.value, status: "completed" });
@@ -29,7 +37,12 @@ function finishStream() {
 function finishHistory(error = "") {
   loadMoreError.value = error;
   if (!error) {
-    messages.value.unshift({ id: `older-${historyRequests.value}`, role: "assistant", text: "Older conversation paragraph. ".repeat(40), status: "completed" });
+    if (pagedHistory) {
+      messages.value.unshift(...historyPage(1));
+      hasMoreBefore.value = false;
+    } else {
+      messages.value.unshift({ id: `older-${historyRequests.value}`, role: "assistant", text: "Older conversation paragraph. ".repeat(40), status: "completed" });
+    }
   }
   loadingMore.value = false;
   completeHistory({ changed: !error });
@@ -57,7 +70,7 @@ const adapter = computed(() => ({
 <template>
   <v-app>
     <v-main>
-      <main class="assistant-responsive-fixture">
+      <main class="assistant-responsive-fixture" :class="{ 'assistant-responsive-fixture--paged': pagedHistory }">
         <nav v-if="streaming">
           <button @click="liveText += 'Growing answer. '">Receive text</button>
           <button @click="finishStream">Finish answer</button>
@@ -80,6 +93,7 @@ const adapter = computed(() => ({
 <style>
 html, body, #app { height: 100%; margin: 0; min-height: 0; }
 .assistant-responsive-fixture { display: flex; flex-direction: column; height: 100dvh; min-height: 0; padding: .5rem; }
+.assistant-responsive-fixture--paged { width: min(420px, 100%); margin: auto; }
 .assistant-responsive-fixture nav { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 1rem; }
 .assistant-responsive-fixture__conversation { flex: 1 1 auto; }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.1.180",
+  "version": "0.1.181",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -34,8 +34,8 @@
     "@ai-sdk/perplexity": "^4.0.43",
     "@ai-sdk/togetherai": "^3.0.49",
     "@ai-sdk/xai": "^4.0.58",
-    "@jskit-ai/resource-core": "0.1.144",
-    "@jskit-ai/resource-crud-core": "0.1.144",
+    "@jskit-ai/resource-core": "0.1.145",
+    "@jskit-ai/resource-crud-core": "0.1.145",
     "@mdi/js": "^7.4.47",
     "@openrouter/ai-sdk-provider": "^3.0.0",
     "ai": "^7.0.101",
@@ -44,8 +44,8 @@
     "ws": "^8.20.1"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.200",
-    "@jskit-ai/kernel": "0.1.202",
+    "@jskit-ai/http-runtime": "0.1.201",
+    "@jskit-ai/kernel": "0.1.203",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },

package/src/client/conversation/AssistantTranscript.vue

@@ -774,6 +774,7 @@ function updateLatestFollowFromScroll(event = {}) {
   // Keep following the reader while the request is pending, before rows prepend.
   if (loadMoreScrollSnapshot && target.scrollHeight === loadMoreScrollSnapshot.scrollHeight) {
     loadMoreScrollSnapshot.scrollTop = scrollTop;
+    loadMoreScrollSnapshot.anchor = visibleHistoryAnchor(target);
   }
   const shouldFollow = scrollElementNearBottom(target);
   if (!shouldFollow && !userScrollIntent.value && followingLatest.value) {
@@ -797,6 +798,17 @@ function updateLatestFollowFromScroll(event = {}) {
   }
 }
 
+function visibleHistoryAnchor(element) {
+  const top = element.getBoundingClientRect().top;
+  for (const turn of element.querySelectorAll(".assistant-transcript__turn")) {
+    const bounds = turn.getBoundingClientRect();
+    if (bounds.bottom > top) {
+      return { element: turn, offset: bounds.top - top };
+    }
+  }
+  return null;
+}
+
 function requestLoadMore() {
   if (!props.hasMoreBefore || props.loadingMore || loadMoreScrollSnapshot) {
     return;
@@ -809,6 +821,7 @@ function requestLoadMore() {
   loadMoreRequestVersion = version;
   loadMoreScrollSnapshot = element
     ? {
+        anchor: visibleHistoryAnchor(element),
         scrollHeight: element.scrollHeight,
         scrollKey: props.scrollKey,
         scrollTop: element.scrollTop,
@@ -842,7 +855,12 @@ async function completeLoadMoreRequest(version, changed) {
   }
   const element = bodyElement.value;
   if (element) {
-    previousScrollTop = snapshot.scrollTop + (element.scrollHeight - snapshot.scrollHeight);
+    // Offscreen turns use estimated heights. Preserve the visible turn instead
+    // of moving by the total height difference, which can change during layout.
+    const anchor = snapshot.anchor;
+    previousScrollTop = anchor && element.contains(anchor.element)
+      ? element.scrollTop + anchor.element.getBoundingClientRect().top - element.getBoundingClientRect().top - anchor.offset
+      : snapshot.scrollTop + (element.scrollHeight - snapshot.scrollHeight);
     element.scrollTop = previousScrollTop;
   }
   clearLoadMoreScrollSnapshot();

package/test/assistantScroll.browser.test.js

@@ -219,6 +219,41 @@ test("conversation scrolling preserves history anchors and resets expansion on s
   }
 });
 
+test("a delayed final history page preserves the visible message at every width", {
+  skip: !RUN_BROWSER_TEST,
+  timeout: 60_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    for (const width of [390, 800, 1365]) {
+      const page = await browser.newPage({ viewport: { width, height: 900 } });
+      await page.goto(`${vite.baseURL}/?controls=1&history=1&paged-history=1`);
+      const body = page.locator(".assistant-transcript__body");
+      await expect(body).toBeVisible();
+      await expect.poll(() => body.evaluate(element => element.scrollHeight - element.clientHeight - element.scrollTop)).toBeLessThan(2);
+      await body.evaluate(element => {
+        element.dispatchEvent(new WheelEvent("wheel", { bubbles: true, deltaY: -1000 }));
+        element.scrollTop = 0;
+        element.dispatchEvent(new Event("scroll", { bubbles: true }));
+      });
+      await expect(page.getByRole("button", { name: "Loading older messages…", exact: true })).toBeDisabled();
+      const anchor = page.getByText("user message 21.", { exact: false });
+      const before = (await anchor.boundingBox()).y;
+      await page.getByRole("button", { name: "Complete history load", exact: true }).evaluate(element => element.click());
+      await expect(page.getByText("user message 1.", { exact: false })).toHaveCount(1);
+      await expect(page.getByRole("button", { name: "Loading older messages…", exact: true })).toHaveCount(0);
+      await expect.poll(async () => Math.abs((await anchor.boundingBox()).y - before)).toBeLessThan(2);
+      await expect(page.locator("output")).toHaveText("History requests: 1");
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
+      await page.close();
+    }
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
 test("upward scrolling loads older history once and preserves retry and selection behavior", {
   skip: !RUN_BROWSER_TEST,
   timeout: 90_000
@@ -249,14 +284,14 @@ test("upward scrolling loads older history once and preserves retry and selectio
         const cdp = await page.context().newCDPSession(page);
         const x = bounds.x + bounds.width / 2;
         const y = bounds.y + 40;
+        const stopped = body.evaluate(element => new Promise(resolve => {
+          element.addEventListener("scrollend", () => resolve(), { once: true });
+        }));
         await cdp.send("Input.dispatchTouchEvent", { type: "touchStart", touchPoints: [{ x, y }] });
         for (let offset = 20; offset <= 380; offset += 20) {
           await cdp.send("Input.dispatchTouchEvent", { type: "touchMove", touchPoints: [{ x, y: y + offset }] });
           await page.evaluate(() => new Promise(requestAnimationFrame));
         }
-        const stopped = body.evaluate(element => new Promise(resolve => {
-          element.addEventListener("scrollend", () => resolve(), { once: true });
-        }));
         await cdp.send("Input.dispatchTouchEvent", { type: "touchEnd", touchPoints: [] });
         await stopped;
         await cdp.detach();