@jskit-ai/assistant-core 0.2.22 → 0.2.24

package/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- The avatar's Show and Minimise buttons set no fixed height: they are 40dp icon buttons with material-web's 48dp touch target, so `jskit check m3` passes on `AssistantConversationElement`.
 - The goal menu closes when Cancel succeeds, as it does after Start; Pause and Resume keep it open.
 - `AssistantConversationElement` has an `avatar-thumbnail` slot, with the `{ size, height }` scope of the other avatar slots: while the avatar is hidden, the **Show avatar** button draws its content instead of the anonymous account icon, such as a still miniature of the avatar, clipped to the button's round 32-pixel disc. The button keeps its label, title and 44-pixel target, and shows the icon as before without the slot.
 - A delivered Codex turn is held as not yet started only until Codex reports it: a `turn/started` that arrives before the `turn/start` answer counts, and a thread read listing exactly that turn as completed or failed settles a turn whose notifications were missed, so its answer is no longer kept waiting for a notification that never comes.

package/examples/conversation/package.json

@@ -8,10 +8,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.2.22",
+    "@jskit-ai/assistant-core": "0.2.24",
     "@jskit-ai/http-runtime": "0.2.10",
     "@jskit-ai/kernel": "0.2.10",
-    "@jskit-ai/material-web": "0.1.0",
+    "@jskit-ai/material-web": "0.1.2",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0",
     "@jskit-ai/connectors-core": "0.2.11",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -220,6 +220,6 @@
     }
   },
   "devDependencies": {
-    "@jskit-ai/material-web": "0.1.0"
+    "@jskit-ai/material-web": "0.1.2"
   }
 }

package/src/client/conversation/AssistantConversationElement.vue

@@ -8,7 +8,7 @@
         <slot name="avatar-control" :size="avatarSize" :height="avatarHeight" />
         <v-btn
           icon="$accountCircle" size="small"
-          variant="text" :width="44" :min-width="44" :min-height="44"
+          variant="text" :width="44" :min-width="44"
           class="assistant-conversation__avatar-size"
           :aria-label="t('jskit.assistant.chat.showAvatar')" :title="t('jskit.assistant.chat.showAvatar')"
           :aria-expanded="avatarSize !== 'hidden'" @click="toggleAvatar"
@@ -26,7 +26,7 @@
           <slot name="avatar-tools" :size="avatarSize" :height="avatarHeight" />
           <v-btn
             icon="$minus" size="small" variant="text" color="primary"
-            :width="40" :min-width="40" :min-height="44" class="assistant-conversation__avatar-size"
+            :width="40" :min-width="40" class="assistant-conversation__avatar-size"
             :aria-label="t('jskit.assistant.chat.minimiseAvatar')" :title="t('jskit.assistant.chat.minimiseAvatar')" :aria-expanded="true"
             @click="toggleAvatar"
           >
@@ -369,7 +369,6 @@ defineExpose({ focus: () => input.value?.focus(), submit, stop });
 .assistant-conversation__avatar { position: absolute; top: var(--assistant-conversation-warning-bottom, 0px); right: 0; z-index: 3; max-width: 100%; min-width: 0; }
 .assistant-conversation__avatar-controls { position: absolute; top: 0; right: 100%; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
 .assistant-conversation__avatar--hidden .assistant-conversation__avatar-controls { right: 0; }
-.assistant-conversation__avatar-size { min-width: 44px; min-height: 44px; }
 .assistant-conversation__avatar-size-disc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: rgba(var(--v-theme-on-surface), .08); }
 .assistant-conversation__avatar-size-disc--minimise { background: rgba(var(--v-theme-primary), .12); }
 .assistant-conversation__avatar-presentation { display: flex; flex-direction: column; align-items: center; min-width: 0; }

package/test/assistantScroll.browser.test.js

@@ -1124,7 +1124,9 @@ test("an optional avatar clamps in a short conversation without consuming its pr
         assert.ok((await input.boundingBox()).height >= 40);
         const avatarExpanded = await sizeControl.getAttribute("aria-expanded") === "true";
         assert.equal(avatarButton.width, avatarExpanded ? 40 : 44, "Expanded minimise is compact; collapsed Show retains its wider target");
-        assert.ok(avatarButton.height >= 44, "Avatar visibility retains its original target height");
+        assert.equal(Math.round(avatarButton.height), 40, "Avatar visibility is a 40dp icon button, with no fixed height");
+        const avatarTarget = await sizeControl.evaluate((element) => Number.parseFloat(window.getComputedStyle(element, "::before").height));
+        assert.ok(avatarTarget >= 48, "Avatar visibility keeps Material's 48dp touch target");
         assert.ok(toolBounds.width >= 48 && toolBounds.height >= 48, "Avatar tools retain a reachable touch target");
         await expect.poll(async () => (await body.boundingBox()).height, { message: "The short container retains readable history" }).toBeGreaterThanOrEqual(100);
         assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
@@ -1174,7 +1176,9 @@ test("an optional avatar clamps in a short conversation without consuming its pr
       await expect(sizeControl).toBeVisible();
       const showBounds = await sizeControl.boundingBox();
       assert.equal(showBounds.width, 44, "Collapsed Show retains its original wider target");
-      assert.ok(showBounds.height >= 44);
+      assert.equal(Math.round(showBounds.height), 40, "Collapsed Show keeps the small icon button's height");
+      assert.ok(await sizeControl.evaluate(element => Number.parseFloat(getComputedStyle(element, "::before").height)) >= 48,
+        "Collapsed Show keeps a 48dp touch target");
       const collapsedControls = await page.locator(".assistant-conversation__avatar-controls").boundingBox();
       assert.equal(collapsedControls.y, chatBounds.y, "The collapsed controls stay at the chat top");
       assert.equal(showBounds.y + showBounds.height / 2, collapsedControls.y + collapsedControls.height / 2,

package/test/conversationAvatarThumbnail.test.js

@@ -60,3 +60,11 @@ test("the hidden avatar's Show button shows the avatar-thumbnail slot, or the ac
   assert.match(fallback, /<i data-icon="\$accountCircle"[^>]*><\/i>/u);
   assert.doesNotMatch(fallback, /fixture-thumbnail/u);
 });
+
+test("the avatar's Show and Minimise buttons set no fixed height, so material-web gives them the 48dp touch target", () => {
+  const source = readFileSync(new URL(elementUrl), "utf8");
+  const buttons = [...source.matchAll(/<v-btn\b[^>]*>/gu)].map(([tag]) => tag).filter((tag) => tag.includes("assistant-conversation__avatar-size"));
+  assert.equal(buttons.length, 2);
+  for (const tag of buttons) assert.doesNotMatch(tag, /(?:^|\s):?(?:min-)?height=/u);
+  assert.doesNotMatch(source, /\.assistant-conversation__avatar-size\s*\{[^}]*height/u);
+});