@jskit-ai/assistant-core 0.2.11 → 0.2.13

package/examples/conversation/package.json

@@ -8,7 +8,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.2.11",
+    "@jskit-ai/assistant-core": "0.2.13",
     "@jskit-ai/http-runtime": "0.2.5",
     "@jskit-ai/kernel": "0.2.5",
     "@mdi/js": "^7.4.47",

package/fixtures/responsive-assistant/ConversationFixture.vue

@@ -179,6 +179,7 @@ const adapter = reactive({
         <button v-if="capabilitiesEnabled" @click="finishUploads">Finish uploads</button>
         <button @click="goalEnabled = !goalEnabled">Toggle goals</button>
         <button v-if="goal" @click="goal = { ...goal, status: 'blocked', reason: 'An explanation of the blocker. '.repeat(200) }">Block goal with long explanation</button>
+        <button v-if="goal" @click="goal = { ...goal, status: 'complete' }">Complete goal</button>
         <template v-if="previewFixture">
           <button @click="temporaryWords = 'Exact temporary words'; temporaryPresent = true; temporaryEditing = false">Add temporary message</button>
           <button @click="newerWords = 'Keep newer live words'; newerPresent = true; newerEditing = false">Add newer temporary message</button>

package/fixtures/responsive-assistant/DeliveryFixture.vue

@@ -5,6 +5,7 @@ import { createAssistantMessageDelivery } from "../../src/client/conversation/me
 
 const recoveryFixture = new URLSearchParams(location.search).has("recovery");
 const acceptedFixture = new URLSearchParams(location.search).has("accepted-history");
+const taskFixture = new URLSearchParams(location.search).has("task");
 const draft = ref("");
 const turns = ref([]);
 const requests = ref([]);
@@ -63,7 +64,10 @@ if (acceptedFixture) {
 }
 const adapter = reactive({
   delivery, attachments,
-  conversation: { cancellableDelivery: recoveryFixture, turns, visible: true, scrollKey: "delivery", welcomeMessage: "Start a conversation." },
+  conversation: {
+    cancellableDelivery: recoveryFixture, turns, visible: true, scrollKey: "delivery", welcomeMessage: "Start a conversation.",
+    variant: taskFixture ? "task" : "main"
+  },
   composer: { draft, canSend: true, submitOnEnter: true, queueWhileSending },
   actions: {
     setDraft(value) { draft.value = value; },

package/fixtures/responsive-assistant/main.js

@@ -9,6 +9,7 @@ import ConversationFixture from "./ConversationFixture.vue";
 import ProgressFixture from "./ProgressFixture.vue";
 import DeliveryFixture from "./DeliveryFixture.vue";
 
+const query = new URLSearchParams(location.search);
 const vuetify = createVuetify({
   components,
   directives,
@@ -18,11 +19,10 @@ const vuetify = createVuetify({
     sets: { mdi }
   },
   theme: {
-    defaultTheme: "light"
+    defaultTheme: query.has("dark") ? "dark" : "light"
   }
 });
 
-const query = new URLSearchParams(location.search);
 createApp(query.has("delivery") ? DeliveryFixture : query.has("progress") ? ProgressFixture : query.has("conversation") ? ConversationFixture : App)
   .use(vuetify)
   .mount("#app");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"

package/src/client/conversation/AssistantGoalControl.vue

@@ -71,7 +71,7 @@ async function setGoal() {
       <v-btn v-bind="menuProps" class="assistant-goal" size="small" variant="text" :aria-label="label" :title="[label, elapsedText, goal?.objective].filter(Boolean).join('\n')">
         <span v-if="goal" class="assistant-goal__light" :class="{ 'assistant-goal__light--running': running, 'assistant-goal__light--working': working, 'assistant-goal__light--paused': goal.status === 'paused' }" aria-hidden="true" />
         <span class="assistant-goal__label">{{ state.loading ? t('jskit.assistant.goal.loading') : state.available === false ? t('jskit.assistant.goal.unavailable') : starting ? t('jskit.assistant.goal.starting') : goal ? t('jskit.assistant.goal.goal') : t('jskit.assistant.goal.set') }}</span>
-        <span v-if="elapsed" class="assistant-goal__elapsed" aria-hidden="true">{{ elapsed }}</span>
+        <span v-if="elapsed && goal.status !== 'complete'" class="assistant-goal__elapsed" aria-hidden="true">{{ elapsed }}</span>
       </v-btn>
     </template>
     <v-card class="assistant-goal__details pa-3" max-width="360">

package/src/client/conversation/AssistantTranscript.css

@@ -248,8 +248,8 @@
 }
 
 .assistant-transcript--task .assistant-transcript__message--user {
-  background: #eee8f8;
-  color: #2d2440;
+  background: rgba(126, 87, 194, 0.16);
+  color: rgb(var(--v-theme-on-surface));
 }
 
 .assistant-transcript__thinking {
@@ -325,13 +325,13 @@
 }
 
 .assistant-transcript__message-header time {
-  color: #6d7888;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-weight: 650;
 }
 
 .assistant-transcript__message-footer {
   align-items: center;
-  color: #9aa6b6;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: flex;
   font-size: 0.88rem;
   font-weight: 500;

package/test/assistantScroll.browser.test.js

@@ -1025,6 +1025,10 @@ test("optional goals show running and paused lights, count only active time, and
     await expect(page.getByRole("button", { name: "Goal paused", exact: true })).toBeVisible();
     await page.getByRole("button", { name: "Resume goal", exact: true }).click();
     await expect(page.getByRole("button", { name: "Pause goal", exact: true })).toBeVisible();
+    // A finished goal keeps its running time in its details, not as a number beside it.
+    await page.getByRole("button", { name: "Complete goal", exact: true }).evaluate(element => element.click());
+    await expect(page.getByRole("button", { name: "Goal complete", exact: true })).toBeVisible();
+    await expect(elapsed).toHaveCount(0);
     await page.getByRole("button", { name: "Toggle goals" }).evaluate(element => element.click());
     await expect(page.locator(".assistant-goal")).toHaveCount(0);
     await expect(page.getByRole("button", { name: "Pause goal", exact: true })).toBeHidden();

package/test/transcriptTheme.browser.test.js

@@ -0,0 +1,87 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { chromium, expect } from "@playwright/test";
+import { createChromiumLaunchOptions, startViteFixture, stopProcess } from "../../../tooling/testUtils/browserFixture.mjs";
+
+// An element's text colour, the theme values it should come from, and its WCAG contrast over what is painted under
+// it: each translucent background is laid over the next one out, down to the first opaque one (white when none is).
+// Runs in the page.
+function readText(element) {
+  const channels = (value) => {
+    const [red, green, blue, alpha = 1] = value.match(/[\d.]+/gu).map(Number);
+    return { red, green, blue, alpha };
+  };
+  const over = (top, under) => ({
+    red: top.red * top.alpha + under.red * (1 - top.alpha),
+    green: top.green * top.alpha + under.green * (1 - top.alpha),
+    blue: top.blue * top.alpha + under.blue * (1 - top.alpha),
+    alpha: 1
+  });
+  const luminance = ({ red, green, blue }) => {
+    const [r, g, b] = [red, green, blue].map((channel) => {
+      const value = channel / 255;
+      return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const layers = [];
+  for (let node = element; node; node = node.parentElement) {
+    const background = channels(getComputedStyle(node).backgroundColor);
+    if (background.alpha > 0) layers.push(background);
+    if (background.alpha === 1) break;
+  }
+  const backdrop = layers.reverse().reduce((under, layer) => over(layer, under), { red: 255, green: 255, blue: 255, alpha: 1 });
+  const style = getComputedStyle(element);
+  const color = channels(style.color);
+  const [lighter, darker] = [luminance(over(color, backdrop)), luminance(backdrop)].sort((a, b) => b - a);
+  return {
+    color: [color.red, color.green, color.blue, color.alpha],
+    onSurface: style.getPropertyValue("--v-theme-on-surface").split(",").map(Number),
+    mediumEmphasis: Number(style.getPropertyValue("--v-medium-emphasis-opacity")),
+    contrast: (lighter + 0.05) / (darker + 0.05)
+  };
+}
+
+test("the task transcript's user bubble, header time and footer follow the light and dark themes", {
+  skip: process.env.JSKIT_ASSISTANT_CORE_BROWSER_INTEGRATION !== "1", timeout: 90_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: fileURLToPath(new URL("../fixtures/responsive-assistant", import.meta.url)) });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    for (const theme of ["light", "dark"]) {
+      const page = await browser.newPage({ viewport: { width: 800, height: 900 } });
+      await page.goto(`${vite.baseURL}/?delivery=1&recovery=1&task=1${theme === "dark" ? "&dark=1" : ""}`);
+      await expect(page.locator(".v-application")).toHaveClass(new RegExp(`v-theme--${theme}`, "u"));
+      const bubble = page.locator(".assistant-transcript--task .assistant-transcript__message--user").filter({ hasText: "Question one" });
+      await expect(bubble).toBeVisible();
+      assert.equal(await bubble.evaluate((element) => getComputedStyle(element).backgroundColor), "rgba(126, 87, 194, 0.16)");
+      // The transcript's own headers carry no time, so the check places one where an application's header would.
+      const header = page.locator(".assistant-transcript__turn .assistant-transcript__message-header").first();
+      await header.evaluate((element) => {
+        const time = document.createElement("time");
+        for (const { name } of element.attributes) {
+          if (name.startsWith("data-v-")) time.setAttribute(name, "");
+        }
+        time.textContent = "06:02";
+        element.append(time);
+      });
+      const samples = {
+        "user bubble": [bubble.locator(".assistant-transcript__user-content"), 1],
+        "user footer": [bubble.locator(".assistant-transcript__message-footer time"), "medium"],
+        "assistant footer": [page.locator(".assistant-transcript__message-footer--assistant time").first(), "medium"],
+        "header time": [header.locator("time"), "medium"]
+      };
+      for (const [name, [locator, alpha]] of Object.entries(samples)) {
+        const text = await locator.evaluate(readText);
+        assert.deepEqual(text.color.slice(0, 3), text.onSurface, `${theme} ${name}: the colour is the theme's on-surface`);
+        assert.equal(text.color[3], alpha === "medium" ? text.mediumEmphasis : alpha, `${theme} ${name}: the opacity`);
+        assert.ok(text.contrast >= 4.5, `${theme} ${name}: contrast ${text.contrast.toFixed(2)}:1 is under 4.5:1`);
+      }
+      await page.close();
+    }
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});