@jskit-ai/assistant-core 0.1.180 → 0.1.182

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.182",
+    "@jskit-ai/http-runtime": "0.1.202",
+    "@jskit-ai/kernel": "0.1.204",
     "@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.21",
+    "@jskit-ai/connectors-catalog": "0.1.21"
   },
   "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/fixtures/responsive-assistant/ConversationFixture.vue

@@ -4,6 +4,8 @@ import AssistantConversationElement from "../../src/client/conversation/Assistan
 import { useAssistantAttachments } from "../../src/client/conversation/useAssistantAttachments.js";
 import { useAssistantSuggestions } from "../../src/client/conversation/useAssistantSuggestions.js";
 const phase = ref("idle");
+const attribution = new URLSearchParams(location.search).has("attribution");
+const assistantLabel = ref("Current assistant");
 const draft = ref("");
 const narrow = ref(false);
 const submissions = ref(0);
@@ -51,7 +53,17 @@ const goalState = reactive({
   resume() { goal.value = { ...goal.value, status: "active", sampledAt: Date.now() }; }
 });
 const adapter = reactive({
-  conversation: { turns: [], visible: true, scrollKey: "fixture", welcomeMessage: "Composer responsiveness fixture" },
+  conversation: {
+    assistantLabel,
+    turns: attribution ? [
+      { turnId: "one", assistantLabel: "First assistant", assistantDetails: "First model",
+        assistant: { role: "assistant", text: "First answer" } },
+      { turnId: "two", assistantLabel: "Second assistant", assistantDetails: "Second model",
+        assistant: { role: "assistant", text: "Second answer", assistantLabel: "Message assistant", assistantDetails: "Message model" } },
+      { turnId: "three", assistant: { role: "assistant", text: "Unattributed answer" } }
+    ] : [],
+    visible: true, scrollKey: "fixture", welcomeMessage: "Composer responsiveness fixture"
+  },
   composer: {
     draft,
     rows: 2,
@@ -76,6 +88,7 @@ const adapter = reactive({
   <v-app>
     <v-main>
       <div class="controls">
+        <button v-if="attribution" @click="assistantLabel = 'Next assistant'">Change assistant</button>
         <button v-for="state in ['idle', 'active', 'reconnecting', 'stopping', 'stopped']" :key="state" @click="phase = state">External {{ state }}</button>
         <button @click="narrow = !narrow">Resize pane</button>
         <button @click="feedback = !feedback">Toggle action feedback</button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.1.180",
+  "version": "0.1.182",
   "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.146",
+    "@jskit-ai/resource-crud-core": "0.1.146",
     "@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.202",
+    "@jskit-ai/kernel": "0.1.204",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },

package/src/client/conversation/AssistantTranscript.vue

@@ -197,7 +197,7 @@
           :messages="entry.messages"
           :pending="isWorking && entry === displayEntries.at(-1)"
           :preview-limit="progressPreviewLimit"
-          :aria-label="`${assistantLabel} progress`"
+          :aria-label="`${entry.turn.assistantLabel || assistantLabel} progress`"
         />
         <div
           v-else
@@ -209,7 +209,9 @@
               <v-icon :icon="mdiRobotOutline" size="16" />
             </span>
             <div class="assistant-transcript__message-header">
-              <span>{{ assistantLabel }}</span>
+              <span :title="entry.message.assistantDetails || entry.turn.assistantDetails || undefined">
+                {{ entry.message.assistantLabel || entry.turn.assistantLabel || assistantLabel }}
+              </span>
             </div>
           </div>
           <div class="assistant-transcript__message assistant-transcript__message--assistant">
@@ -774,6 +776,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 +800,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 +823,7 @@ function requestLoadMore() {
   loadMoreRequestVersion = version;
   loadMoreScrollSnapshot = element
     ? {
+        anchor: visibleHistoryAnchor(element),
         scrollHeight: element.scrollHeight,
         scrollKey: props.scrollKey,
         scrollTop: element.scrollTop,
@@ -842,7 +857,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

@@ -22,6 +22,26 @@ const VIEWPORTS = Object.freeze([
   Object.freeze({ name: "drawer", width: 360, height: 600 })
 ]);
 
+test("saved reply attribution remains when the current assistant changes", {
+  skip: !RUN_BROWSER_TEST, timeout: 60_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    const page = await browser.newPage();
+    await page.goto(`${vite.baseURL}/?conversation=1&attribution=1`);
+    const names = page.locator('[data-message-role="assistant"] .assistant-transcript__message-header span');
+    await expect(names).toHaveText(["First assistant", "Message assistant", "Current assistant"]);
+    await expect(names.nth(0)).toHaveAttribute("title", "First model");
+    await expect(names.nth(1)).toHaveAttribute("title", "Message model");
+    await page.getByRole("button", { name: "Change assistant", exact: true }).click();
+    await expect(names).toHaveText(["First assistant", "Message assistant", "Next assistant"]);
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
 test("streaming answers grow in one bubble, preserve drafts and settle once at every width", {
   skip: !RUN_BROWSER_TEST, timeout: 90_000
 }, async () => {
@@ -219,6 +239,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 +304,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();