@jskit-ai/assistant-runtime 0.1.163 → 0.1.164

package/fixtures/conversation/App.vue

@@ -18,10 +18,11 @@ function switchWorkspace() { router.push({ query: { workspace: workspace.value =
 <template>
   <v-app>
     <v-main>
-      <div class="fixture">
+      <div class="fixture" :class="{ 'fixture--page': route.query.page === '1' }">
         <nav aria-label="Fixture controls">
           <button @click="switchWorkspace">Switch workspace</button>
           <button @click="mergeContext({ user: { id: context.user.id === '1' ? '2' : '1' } })">Switch user</button>
+          <button @click="mergeContext({ workspace: { id: '42', slug: workspace, name: 'Workspace metadata loaded' } })">Load workspace metadata</button>
           <button @click="surface = surface === 'admin' ? 'console' : 'admin'">Switch surface</button>
           <button @click="mounted = !mounted">Toggle view</button>
           <button @click="second = !second">Second instance</button>
@@ -44,4 +45,6 @@ html, body, #app { height: 100%; margin: 0; }
 .fixture__panes { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
 .fixture__panes > * { flex: 1 1 0; min-width: 0; }
 .fixture__panes--compact { width: min(360px, 100%); }
+.fixture--page { height: auto; }
+.fixture--page .fixture__panes { display: block; }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-runtime",
-  "version": "0.1.163",
+  "version": "0.1.164",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -11,15 +11,15 @@
     "./server/actionIds": "./src/server/actionIds.js"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.170",
-    "@jskit-ai/database-runtime": "0.1.192",
+    "@jskit-ai/assistant-core": "0.1.171",
+    "@jskit-ai/database-runtime": "0.1.193",
     "json-rest-schema": "^1.0.17"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.190",
-    "@jskit-ai/http-web": "0.1.37",
-    "@jskit-ai/kernel": "0.1.192",
-    "@jskit-ai/shell-web": "0.1.196",
+    "@jskit-ai/http-runtime": "0.1.191",
+    "@jskit-ai/http-web": "0.1.38",
+    "@jskit-ai/kernel": "0.1.193",
+    "@jskit-ai/shell-web": "0.1.197",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"

package/src/client/components/AssistantSurfaceClientElement.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, toRef } from "vue";
+import { computed, onMounted, onScopeDispose, reactive, ref, toRef, watchPostEffect } from "vue";
 import { AssistantConversationElement } from "@jskit-ai/assistant-core/client/conversation";
 import { useAssistantRuntime } from "../composables/useAssistantRuntime.js";
 import { mapAssistantConversationTurns } from "../support/assistantRuntimeState.js";
@@ -15,7 +15,22 @@ const props = defineProps({
 const runtime = useAssistantRuntime({ surfaceId: toRef(props, "surfaceId") });
 const state = reactive(runtime.state);
 const conversation = ref(null);
+const root = ref(null);
 const historyOpen = ref(false);
+// Page mode owns viewport sizing; compact mode fills the host's bounded pane.
+onMounted(() => {
+  const syncPageOffset = () => {
+    if (props.layout === "page") root.value.style.setProperty("--assistant-page-top", `${Math.max(0, root.value.getBoundingClientRect().top)}px`);
+  };
+  const observer = new ResizeObserver(syncPageOffset);
+  observer.observe(root.value.parentElement);
+  window.addEventListener("resize", syncPageOffset);
+  watchPostEffect(syncPageOffset);
+  onScopeDispose(() => {
+    observer.disconnect();
+    window.removeEventListener("resize", syncPageOffset);
+  });
+});
 const selectedConversation = computed(() => state.conversationHistory.find((entry) => String(entry.id) === state.activeConversationId));
 const turns = computed(() => mapAssistantConversationTurns(state.messages, state.pendingToolEvents, props));
 const adapter = computed(() => ({
@@ -67,7 +82,7 @@ defineExpose({ focus: () => conversation.value?.focus() });
 </script>
 
 <template>
-  <section class="assistant-surface" :class="`assistant-surface--${layout}`" :aria-label="assistantLabel">
+  <section ref="root" class="assistant-surface" :class="`assistant-surface--${layout}`" :aria-label="assistantLabel">
     <div class="assistant-surface__toolbar">
       <span class="assistant-surface__title">{{ selectedConversation?.title || 'New conversation' }}</span>
       <v-btn variant="text" @click="historyOpen = true">Conversations</v-btn>
@@ -122,7 +137,7 @@ defineExpose({ focus: () => conversation.value?.focus() });
 
 <style scoped>
 .assistant-surface { display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0; min-width: 0; overflow: hidden; gap: .5rem; }
-.assistant-surface--page { padding: .5rem; }
+.assistant-surface--page { padding: .5rem; height: calc(100dvh - var(--assistant-page-top, 0px) - var(--v-layout-bottom, 0px) - 1rem - env(safe-area-inset-bottom, 0px)); }
 .assistant-surface__toolbar { display: flex; align-items: center; flex-wrap: wrap; flex: 0 0 auto; gap: .25rem; }
 .assistant-surface__title { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
 .assistant-surface__conversation { flex: 1 1 auto; }

package/src/client/composables/useAssistantRuntime.js

@@ -168,14 +168,11 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
     return {
       targetSurfaceId: normalizeText(assistantSurface.value?.targetSurfaceId).toLowerCase(),
       userId: normalizeRecordId(placementSnapshot.value?.user?.id, { fallback: null }),
-      workspaceSlug,
-      workspaceId: assistantSurface.value?.runtimeSurfaceRequiresWorkspace
-        ? normalizeRecordId(placementSnapshot.value?.workspace?.id, { fallback: null })
-        : null
+      workspaceSlug
     };
   });
   const hasRuntimeScope = computed(() =>
-    Boolean(assistantSurface.value) &&
+    Boolean(assistantSurface.value && runtimeScope.value.userId) &&
     (assistantSurface.value?.runtimeSurfaceRequiresWorkspace ? Boolean(runtimeScope.value.workspaceSlug) : true)
   );
 

package/test/conversation.browser.test.js

@@ -224,3 +224,37 @@ test("history restores preserve new typing and reject obsolete pages and failed
     await stopProcess(vite);
   }
 });
+
+test("page assistant bounds long history in a document layout and preserves drafts when workspace metadata arrives", {
+  skip: process.env.JSKIT_ASSISTANT_RUNTIME_BROWSER_INTEGRATION !== "1",
+  timeout: 60_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  const page = await browser.newPage();
+  try {
+    await page.goto(`${vite.baseURL}/?page=1`);
+    await page.getByRole("button", { name: "Conversations", exact: true }).click();
+    await page.getByRole("dialog", { name: "Conversations", exact: true }).getByText("Saved conversation", { exact: true }).click();
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toBeVisible();
+    const input = page.getByRole("textbox", { name: "Message AI assistant" });
+    for (const viewport of [{ width: 390, height: 844 }, { width: 800, height: 800 }, { width: 1280, height: 600 }]) {
+      await page.setViewportSize(viewport);
+      await expect.poll(async () => {
+        const bounds = await input.boundingBox();
+        return bounds.y + bounds.height;
+      }).toBeLessThanOrEqual(viewport.height);
+      assert.ok(await page.getByLabel("Conversation messages", { exact: true }).evaluate(element => element.scrollHeight > element.clientHeight));
+    }
+    await input.fill("Keep this draft while workspace details load.");
+    await input.evaluate(element => { element.focus(); element.setSelectionRange(5, 9); });
+    await page.getByRole("button", { name: "Load workspace metadata" }).evaluate(element => element.click());
+    await expect(input).toHaveValue("Keep this draft while workspace details load.");
+    await expect(input).toBeFocused();
+    assert.deepEqual(await input.evaluate(element => [element.selectionStart, element.selectionEnd]), [5, 9]);
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toBeVisible();
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});