@jskit-ai/assistant-core 0.2.11 → 0.2.12

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.12",
     "@jskit-ai/http-runtime": "0.2.5",
     "@jskit-ai/kernel": "0.2.5",
     "@mdi/js": "^7.4.47",

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.12",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"

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/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);
+  }
+});