@happyvertical/smrt-chat 0.30.0 → 0.31.1

package/dist/svelte/components/messages/MessageItem.svelte

@@ -56,6 +56,16 @@ const formattedTime = $derived.by(() => {
   });
 });
 
+const hasActions = $derived(
+  Boolean(onreact || onreply || (isOwn && (onedit || ondelete))),
+);
+
+// Stable id linking the disclosure trigger (aria-controls) to the revealed
+// action group. The actions are a labelled group of independently
+// keyboard-operable buttons, not an ARIA menu, so the trigger is a plain
+// disclosure toggle (aria-expanded) rather than aria-haspopup="menu".
+const actionsId = $derived(`message-actions-${message.id}`);
+
 function handleReact(emoji: string) {
   onreact?.(message.id, emoji);
   showReactionPicker = false;
@@ -64,8 +74,40 @@ function handleReact(emoji: string) {
 function toggleReactionPicker() {
   showReactionPicker = !showReactionPicker;
 }
+
+// The "more actions" button is the keyboard/touch-reachable entry point that
+// opens the action bar (a11y blocker, T2 #1391). It opens rather than toggles
+// so it stays robust against the focus-then-click ordering a tap/keyboard
+// activation produces; the bar is dismissed by Escape, blur, or mouse-leave.
+function openActions() {
+  showActions = true;
+}
+
+// Collapse the action bar (and any open picker) once focus leaves the row — the
+// keyboard/touch counterpart to onmouseleave so the actions are not hover-only.
+function handleFocusOut(event: FocusEvent) {
+  const next = event.relatedTarget as Node | null;
+  const row = event.currentTarget as HTMLElement;
+  if (next && row.contains(next)) return;
+  showActions = false;
+  showReactionPicker = false;
+}
+
+// Escape closes the action bar / picker when open. Bound on the window (gated
+// on open state) rather than the noninteractive row element so Svelte's
+// a11y_no_noninteractive_element_interactions rule stays satisfied.
+function handleEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    showReactionPicker = false;
+    showActions = false;
+  }
+}
 </script>
 
+<svelte:window
+  onkeydown={showActions || showReactionPicker ? handleEscape : undefined}
+/>
+
 {#if message.messageType === 'system' || message.messageType === 'action'}
   <div class="message-item message-item--system">
     <MessageBubble content={message.content} isOwn={false} variant="system" />
@@ -78,6 +120,7 @@ function toggleReactionPicker() {
     aria-label={t(M['chat.message_item.message_from'], { name: message.senderName })}
     onmouseenter={() => showActions = true}
     onmouseleave={() => { showActions = false; showReactionPicker = false; }}
+    onfocusout={handleFocusOut}
   >
     {#if !isOwn}
       <div class="message-item__avatar">
@@ -151,8 +194,27 @@ function toggleReactionPicker() {
       </div>
     </div>
 
+    {#if hasActions}
+      <button
+        class="message-item__more-btn"
+        type="button"
+        onclick={openActions}
+        onfocus={openActions}
+        aria-label={t(M['chat.message_item.more_actions'])}
+        aria-expanded={showActions}
+        aria-controls={actionsId}
+      >
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><circle cx="3" cy="8" r="1.3" fill="currentColor" /><circle cx="8" cy="8" r="1.3" fill="currentColor" /><circle cx="13" cy="8" r="1.3" fill="currentColor" /></svg>
+      </button>
+    {/if}
+
     {#if showActions}
-      <div class="message-item__actions">
+      <div
+        class="message-item__actions"
+        role="group"
+        id={actionsId}
+        aria-label={t(M['chat.message_item.more_actions'])}
+      >
         {#if onreact}
           <button
             class="message-item__action-btn"
@@ -379,6 +441,49 @@ function toggleReactionPicker() {
     font-style: italic;
   }
 
+  .message-item__more-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    top: 0;
+    right: var(--smrt-spacing-4, 1rem);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-surface, #ffffff);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .message-item--own .message-item__more-btn {
+    right: auto;
+    left: var(--smrt-spacing-4, 1rem);
+  }
+
+  /* Reveal the keyboard/touch affordance on hover OR when focus is inside the
+     row, so it is never strictly hover-only (a11y blocker, T2 #1391). Always
+     visible to coarse pointers (touch) which cannot hover. */
+  .message-item:hover .message-item__more-btn,
+  .message-item:focus-within .message-item__more-btn {
+    opacity: 1;
+  }
+
+  .message-item__more-btn:focus-visible {
+    opacity: 1;
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 1px;
+  }
+
+  @media (hover: none) {
+    .message-item__more-btn {
+      opacity: 1;
+    }
+  }
+
   .message-item__actions {
     display: flex;
     align-items: center;
@@ -391,6 +496,7 @@ function toggleReactionPicker() {
     border-radius: var(--smrt-radius-small, 0.25rem);
     padding: var(--smrt-spacing-1, 4px);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12));
+    z-index: 1;
   }
 
   .message-item--own .message-item__actions {
@@ -428,4 +534,12 @@ function toggleReactionPicker() {
     right: auto;
     left: var(--smrt-spacing-4, 1rem);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .message-item__more-btn,
+    .message-item__action-btn,
+    .message-item__reaction {
+      transition: none;
+    }
+  }
 </style>

package/dist/svelte/components/messages/MessageItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageItem.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oBAAoB;IACpB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAyJD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageItem.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oBAAoB;IACpB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAuMD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/messages/__tests__/MessageItem.test.js

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for MessageItem via the shared S11 harness (#1416).
+ *
+ * Regression for the T2 #1391 a11y blocker: the per-message actions
+ * (reply/edit/delete/react) used to be revealed ONLY by mouseenter/mouseleave,
+ * so keyboard- and touch-only users could never reach them. There must now be a
+ * keyboard-reachable "more actions" button that toggles the action bar, and
+ * focusing into the row must reveal the actions.
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import MessageItem from '../MessageItem.svelte';
+function makeMessage(overrides = {}) {
+    return {
+        id: 'm1',
+        roomId: 'room-1',
+        threadId: null,
+        senderProfileId: 'p1',
+        senderName: 'Ada',
+        senderAvatarUrl: undefined,
+        agentSessionId: null,
+        content: 'Hello there',
+        messageType: 'text',
+        role: 'user',
+        isEdited: false,
+        isDeleted: false,
+        replyTo: null,
+        reactions: [],
+        attachments: [],
+        toolCallData: null,
+        createdAt: new Date('2026-01-01T00:00:00Z'),
+        ...overrides,
+    };
+}
+describe('MessageItem', () => {
+    it('renders a keyboard-reachable "more actions" button when actions are available', () => {
+        render(MessageItem, {
+            props: {
+                message: makeMessage(),
+                isOwn: false,
+                onreply: vi.fn(),
+                onreact: vi.fn(),
+            },
+        });
+        const moreBtn = screen.getByRole('button', { name: 'Message actions' });
+        expect(moreBtn).toBeInTheDocument();
+        // A real <button> is inherently in the tab order (no tabindex="-1").
+        expect(moreBtn.getAttribute('tabindex')).not.toBe('-1');
+    });
+    it('reveals the action bar via the more-actions button without any mouse hover', async () => {
+        const onreply = vi.fn();
+        render(MessageItem, {
+            props: {
+                message: makeMessage(),
+                isOwn: false,
+                onreply,
+                onreact: vi.fn(),
+            },
+        });
+        // Actions are hidden until requested — no hover, no focus yet.
+        expect(screen.queryByRole('button', { name: 'Reply' })).toBeNull();
+        await userEvent.click(screen.getByRole('button', { name: 'Message actions' }));
+        // The action bar is now reachable; clicking Reply invokes the callback.
+        const replyBtn = await screen.findByRole('button', { name: 'Reply' });
+        await userEvent.click(replyBtn);
+        expect(onreply).toHaveBeenCalledWith('m1');
+    });
+    it("exposes edit/delete actions for the user's own message", async () => {
+        const onedit = vi.fn();
+        const ondelete = vi.fn();
+        render(MessageItem, {
+            props: {
+                message: makeMessage(),
+                isOwn: true,
+                onedit,
+                ondelete,
+            },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Message actions' }));
+        await userEvent.click(await screen.findByRole('button', { name: 'Edit' }));
+        expect(onedit).toHaveBeenCalledWith('m1');
+        // The bar stays open while focus remains inside the row, so Delete is
+        // reachable in the same interaction.
+        await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+        expect(ondelete).toHaveBeenCalledWith('m1');
+    });
+    it('does not render the more-actions affordance when no action callbacks are provided', () => {
+        render(MessageItem, {
+            props: {
+                message: makeMessage(),
+                isOwn: false,
+            },
+        });
+        expect(screen.queryByRole('button', { name: 'Message actions' })).toBeNull();
+    });
+    it('is axe-clean with the action affordance present', async () => {
+        const { container } = render(MessageItem, {
+            props: {
+                message: makeMessage(),
+                isOwn: false,
+                onreply: vi.fn(),
+                onreact: vi.fn(),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/MentionAutocomplete.svelte

@@ -19,9 +19,11 @@ export interface Props {
   onselect: (id: string) => void;
   /** Whether the popup is visible */
   isVisible: boolean;
+  /** Dismiss the popup (e.g. Escape pressed) without selecting */
+  oncancel?: () => void;
 }
 
-const { query, suggestions, onselect, isVisible }: Props = $props();
+const { query, suggestions, onselect, isVisible, oncancel }: Props = $props();
 
 let activeIndex = $state(0);
 
@@ -50,6 +52,8 @@ function handleKeydown(event: KeyboardEvent) {
       onselect(suggestions[activeIndex].id);
       break;
     case 'Escape':
+      event.preventDefault();
+      oncancel?.();
       break;
   }
 }

package/dist/svelte/components/shared/MentionAutocomplete.svelte.d.ts

@@ -11,6 +11,8 @@ export interface Props {
     onselect: (id: string) => void;
     /** Whether the popup is visible */
     isVisible: boolean;
+    /** Dismiss the popup (e.g. Escape pressed) without selecting */
+    oncancel?: () => void;
 }
 declare const MentionAutocomplete: import("svelte").Component<Props, {}, "">;
 type MentionAutocomplete = ReturnType<typeof MentionAutocomplete>;

package/dist/svelte/components/shared/MentionAutocomplete.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MentionAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MentionAutocomplete.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AA+ED,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MentionAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MentionAutocomplete.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAiFD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/shared/UserPresence.svelte

@@ -42,15 +42,15 @@ const labelText: Record<string, string> = {
   }
 
   .presence__dot.online {
-    background: var(--smrt-color-success, #4caf50);
+    background: var(--smrt-color-success, #1e8e3e);
   }
 
   .presence__dot.away {
-    background: var(--smrt-color-warning, #ff9800);
+    background: var(--smrt-color-warning, #f9ab00);
   }
 
   .presence__dot.dnd {
-    background: var(--smrt-color-error, #f44336);
+    background: var(--smrt-color-error, #b3261e);
   }
 
   .presence__dot.offline {

package/dist/svelte/components/shared/__tests__/MentionAutocomplete.test.js

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for MentionAutocomplete via the shared S11 harness (#1416).
+ *
+ * Regression for T2 #1391: `case 'Escape': break;` was a no-op, so the
+ * suggestion popup could not be dismissed from the keyboard. Escape must now
+ * invoke the `oncancel` callback so a parent can close the popup.
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import MentionAutocomplete from '../MentionAutocomplete.svelte';
+const SUGGESTIONS = [
+    { id: 'p1', name: 'Ada Lovelace' },
+    { id: 'p2', name: 'Alan Turing' },
+];
+describe('MentionAutocomplete', () => {
+    it('invokes oncancel when Escape is pressed while visible', async () => {
+        const oncancel = vi.fn();
+        render(MentionAutocomplete, {
+            props: {
+                query: 'a',
+                suggestions: SUGGESTIONS,
+                onselect: vi.fn(),
+                isVisible: true,
+                oncancel,
+            },
+        });
+        await userEvent.keyboard('{Escape}');
+        expect(oncancel).toHaveBeenCalledTimes(1);
+    });
+    it('does not throw on Escape when no oncancel is provided', async () => {
+        render(MentionAutocomplete, {
+            props: {
+                query: 'a',
+                suggestions: SUGGESTIONS,
+                onselect: vi.fn(),
+                isVisible: true,
+            },
+        });
+        await expect(userEvent.keyboard('{Escape}')).resolves.not.toThrow();
+    });
+    it('selects the active suggestion on Enter', async () => {
+        const onselect = vi.fn();
+        render(MentionAutocomplete, {
+            props: {
+                query: 'a',
+                suggestions: SUGGESTIONS,
+                onselect,
+                isVisible: true,
+            },
+        });
+        await userEvent.keyboard('{Enter}');
+        expect(onselect).toHaveBeenCalledWith('p1');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(MentionAutocomplete, {
+            props: {
+                query: 'a',
+                suggestions: SUGGESTIONS,
+                onselect: vi.fn(),
+                isVisible: true,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/i18n.messages.d.ts

@@ -24,6 +24,7 @@ export declare const M: {
     readonly 'chat.message_item.reply': "chat.message_item.reply";
     readonly 'chat.message_item.edit': "chat.message_item.edit";
     readonly 'chat.message_item.delete': "chat.message_item.delete";
+    readonly 'chat.message_item.more_actions': "chat.message_item.more_actions";
     readonly 'chat.message_list.messages_label': "chat.message_list.messages_label";
     readonly 'chat.message_list.no_messages': "chat.message_list.no_messages";
     readonly 'chat.thread_panel.thread_label': "chat.thread_panel.thread_label";

package/dist/svelte/i18n.messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.messages.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.messages.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEZ,CAAC"}
+{"version":3,"file":"i18n.messages.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.messages.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEZ,CAAC"}

package/dist/svelte/i18n.messages.js

@@ -38,6 +38,7 @@ export const M = defineMessages({
     'chat.message_item.reply': 'Reply',
     'chat.message_item.edit': 'Edit',
     'chat.message_item.delete': 'Delete',
+    'chat.message_item.more_actions': 'Message actions',
     // MessageList
     'chat.message_list.messages_label': 'Messages',
     'chat.message_list.no_messages': 'No messages yet',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-chat",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "description": "Chat rooms, DMs, threads, and agent conversations for the SMRT framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,10 +55,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-core": "0.30.0",
-    "@happyvertical/smrt-types": "0.30.0",
-    "@happyvertical/smrt-ui": "0.30.0",
-    "@happyvertical/smrt-tenancy": "0.30.0"
+    "@happyvertical/smrt-ui": "0.31.1",
+    "@happyvertical/smrt-types": "0.31.1",
+    "@happyvertical/smrt-core": "0.31.1",
+    "@happyvertical/smrt-tenancy": "0.31.1"
   },
   "peerDependencies": {
     "svelte": "^5.18.0"
@@ -78,9 +78,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-agents": "0.30.0",
-    "@happyvertical/smrt-profiles": "0.30.0",
-    "@happyvertical/smrt-vitest": "0.30.0"
+    "@happyvertical/smrt-agents": "0.31.1",
+    "@happyvertical/smrt-profiles": "0.31.1",
+    "@happyvertical/smrt-vitest": "0.31.1"
   },
   "scripts": {
     "build": "vite build --mode library && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json",