12 Commits

Author SHA1 Message Date
maaz519 d2820a64e3 chore(kernel-client): 0.1.6
0.1.5 was published with npm, which does not rewrite pnpm's workspace: protocol,
so its package.json carried '@insignia/iios-contracts: workspace:*' and npm
consumers failed with EUNSUPPORTEDPROTOCOL. Republished via pnpm publish. Do not
use 0.1.5.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 17:57:23 +05:30
maaz519 272c6acd31 fix(messaging): a sent message no longer shows "Seen" instantly
Two independent defects; either alone caused it, in DMs, groups and channels.

1. useMessages reported a read of the newest NON-PENDING message regardless of
   author. Sending therefore made the client immediately mark its own message
   read, the server echoed a receipt for it, and the sender's bubble showed
   "Seen" before anyone had opened the thread. You do not read your own message:
   lastReadableId now skips your own.

2. The guard meant to catch exactly this — `e.actorId !== currentActorId` — could
   never fire: the receipt carries the reader's IIOS actor UUID while clients hold
   a userId, so the comparison was always true and every receipt, including your
   own, counted as the other side. The gateway now also emits userId on READ and
   DELIVERED receipts (matching what `annotation` already did), and ReceiptEvent
   carries it as optional so older servers still typecheck.

MockAdapter.markRead was a no-op, so it could not exercise any of this; it now
echoes a receipt like a real server. Regression test verified to fail without
the fix. SDK 0.1.14; suite 17 files / 101 tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 17:57:23 +05:30
maaz519 eb0ace8ad7 fix(messaging-ui): composer height was being clobbered by a class-name collision
The chat composer reused .miu-textarea, which the INBOX MAIL composer already
owned further down the stylesheet with `resize: vertical; min-height: 90px`.
Equal specificity, later rule wins — so the mail styling applied to the chat box:
90px tall with a resize grabber, and every height fix in 0.1.10–0.1.12 was
silently overridden. That is why the box never changed.

The composer now uses its own .miu-composer-box; the inbox rule is untouched.
Adds a regression test asserting the composer does not carry .miu-textarea.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 17:57:23 +05:30
maaz519 e2f66fe622 fix(messaging-ui): composer input back to its original 38px height
0.1.11 left it at 40px with line-height 1.45, so the line (20.3px) overflowed
the 20px content box — taller than the <input> it replaced, and liable to show a
scrollbar on a single line.

Collapsed height is now one token, --miu-composer-h: 38px, shared by the
textarea, attach and send so they cannot drift apart again. Padding tightened to
8px (from .miu-input's 9px) with line-height 1.4, so a 14px line is 19.6 + 16 + 2
= 37.6px and fits exactly — matching the original single-line input.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 17:57:23 +05:30
maaz519 9a0c74cb6e fix(messaging-ui): composer no longer stretches the send/attach buttons
The textarea swap made the composer row tall and dragged the controls with it.
Three causes, all fixed:

- No box-sizing anywhere in the stylesheet, so `min-height: 38px` on a padded,
  bordered textarea rendered ~58px (content-box adds 18px padding + 2px border
  on top). The textarea is now border-box with a 40px min-height — the same
  height the old single-line input had.
- .miu-composer-row is display:flex with no align-items, so it defaulted to
  `stretch` and the buttons — neither of which declared a height — grew to the
  row. Now align-items: flex-end, so controls stay pinned to the bottom while
  the box grows upward (WhatsApp behaviour), with an explicit 40px on both.
  The send height is scoped to .miu-composer so modal/settings buttons keep
  their own sizing.
- The auto-grow effect set height = scrollHeight, which under content-box
  double-counted padding on every keystroke. It now compensates for the border
  explicitly, correct under border-box.

Bumped to 0.1.11. SDK suite: 17 files / 98 tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 17:57:23 +05:30
maaz519 0c8eaaf74b fix(messaging-ui): unreadable code chip on own messages + raw markers in previews
Two bugs from the formatting work, both visible in the CRM messenger:

1. Inline code / code blocks were invisible in your OWN bubbles. `.miu-code` sets
   background: --miu-panel-2 (#1d1d26) while the is-mine override set only the
   colour to --miu-accent-text (#1a1206) — near-black on near-black, ~1.03:1
   contrast. The chip now tints the accent bubble (rgba(0,0,0,.16)) instead of
   using the panel colour, so it reads against any accent.

2. The conversation list showed the raw last message, so a strikethrough message
   previewed as "~crazy~". Adds stripMarkup() — markers off, code unwrapped,
   nesting handled, honouring the same word-boundary rule so snake_case_name and
   "5 * 3" survive — and uses it for the preview line.

Bumped to 0.1.10. SDK suite: 17 files / 98 tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 17:57:23 +05:30
maaz519 ca02da000f Merge pull request 'Feat/messaging ui foundation' (#12) from feat/messaging-ui-foundation into dev
Reviewed-on: #12
2026-07-25 11:14:00 +00:00
maaz519 2c61f49de1 docs(env): document REDIS_URL — it now also gates cross-replica presence
REDIS_URL was read by the code but absent from .env.example. Beyond the socket.io
fan-out it now selects RedisPresenceService, so leaving it unset in a multi-replica
deploy silently degrades the notification presence gate to per-process.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 16:43:03 +05:30
maaz519 c946f1e061 feat(messaging-ui): message formatting + native spellcheck in the composer
Composer becomes a <textarea> so the PLATFORM supplies text services: red
spellcheck squiggles, right-click suggestions / add-to-dictionary, and mobile
autocorrect (spellCheck + autoCorrect + autoCapitalize). Nothing shipped for it.
Previously a single-line <input>, which Firefox does not spellcheck by default
(layout.spellcheckDefault=1 checks multi-line only) and which could not hold a
multi-line message at all. Enter sends, Shift+Enter (and IME composition) makes a
newline, and the box grows with content.

WhatsApp-style markup: *bold*, _italic_, ~strike~, `code`, ```fenced blocks```,
plus bare URLs. Cmd/Ctrl+B/I/E and a small toolbar wrap the selection in markers.
Messages stay PLAIN TEXT on the wire, so stored history and older clients are
unaffected — formatting is purely a render concern.

renderRichText() returns a ReactNode tree and never uses dangerouslySetInnerHTML,
so message text cannot inject markup; links are restricted to http/https/mailto
(safeHref) to close the javascript: vector. Code is tokenized first and its
contents stay literal; markers require word boundaries so snake_case_name and
"5 * 3" are not mangled.

Bumped to 0.1.9. SDK suite: 17 files / 95 tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 16:43:03 +05:30
maaz519 3d08fa42f8 feat(messaging-ui): import a channel's roster from the settings panel
Phase C of channel-roster import. Adds the optional addMembers(threadId, userIds)
adapter seam (+ BulkAddResult) and, in ConversationSettings, a '#' mode on the
existing Add-people box that lists the channels you belong to — public AND
private, since the source list is your own membership-scoped conversation list.

Picking a channel STAGES the import (reads its roster, diffs against who is
already here) and shows a confirm — 'Add 9 people from #design? (3 already here)'
— so an administrative action never fires on a stray click. The result line
reports added / already-a-member / failed. Absent addMembers => the affordance is
hidden entirely and '#' is just a search string.

Bumped to 0.1.8. SDK suite: 15 files / 78 tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 16:43:03 +05:30
maaz519 0336621c01 feat(threads): govern roster reads + add a bulk participant primitive
Phase A of channel-roster import (add everyone from another channel).

SECURITY: listParticipants was gated by iios.thread.read, which has no case in
DevOpaPort and so fell through to default-allow — any caller in a scope could
enumerate ANY thread's members, including private channels they aren't in. Since
PlatformModule binds LocalDevPorts unconditionally (no real OPA adapter exists),
that was live. Adds iios.thread.participant.list: members only, public channels
exempt, ungoverned threads unchanged. This is also Zoom's rule for this feature
('you must be a member of the channel to invite all of its members').

Adds MessageService.addParticipants(): many users in ONE governed call, capped at
MAX_BULK_PARTICIPANTS (200), idempotent (already-members are 'skipped'), and
deliberately non-atomic so one unresolvable user can't sink an import — outcome
is reported per user as {added, skipped, failed}. The dm two-person cap now reads
targetCount so it holds for a batch, not just one add at a time. New REST route
POST /v1/threads/:id/participants/bulk.

The kernel stays generic: it takes an explicit userId list and never learns where
that list came from — chat meaning lives only in the policy plane.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 16:43:03 +05:30
maaz519 4f9a252118 Merge pull request 'Feat/messaging ui foundation' (#11) from feat/messaging-ui-foundation into dev
Reviewed-on: #11
2026-07-23 10:32:03 +00:00
25 changed files with 972 additions and 33 deletions
+5
View File
@@ -7,6 +7,11 @@ JWT_SECRET="dev-only-change-me"
# Per-app HS256 secrets, JSON map keyed by appId (the `session` platform port)
APP_SECRETS={"portal-demo":"dev-secret"}
# Redis. Unset → single-instance mode: socket.io uses its in-memory adapter (realtime does NOT
# fan out across replicas) and presence is a per-process Map (so the "don't push a thread you're
# viewing" gate only sees sockets on the same replica). REQUIRED for any multi-replica deploy.
REDIS_URL="redis://localhost:6379"
# Full-text message search (Meilisearch). Unset MEILI_URL → search is disabled (no-op).
# MEILI_KEY must equal the meilisearch server's MEILI_MASTER_KEY (docker-compose default below).
MEILI_URL="http://localhost:7700"
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@insignia/iios-kernel-client",
"version": "0.1.4",
"version": "0.1.6",
"type": "module",
"main": "dist/index.js",
"module": "dist/index.js",
+4
View File
@@ -37,7 +37,11 @@ export interface OpenThreadResult {
export interface ReceiptEvent {
interactionId: string;
/** The reader's IIOS actor UUID — an internal id, NOT comparable to a caller's userId. */
actorId: string;
/** The reader's userId — the same id space clients hold, so they can ignore their own receipt.
* Optional: absent from servers older than the change that added it. */
userId?: string;
kind: 'READ' | 'DELIVERED';
}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@insignia/iios-messaging-ui",
"version": "0.1.7",
"version": "0.1.14",
"type": "module",
"main": "dist/index.js",
"module": "dist/index.js",
@@ -1,5 +1,6 @@
import type {
Attachment,
BulkAddResult,
ChannelSummary,
Conversation,
CreateChannelInput,
@@ -97,6 +98,11 @@ export interface MessagingAdapter {
/** Add a person to a group or private channel. */
addMember?(threadId: string, userId: string): Promise<void>;
/** Add many people in one call — powers "add everyone from another channel". The host is expected
* to enforce who may add (and who may read the source roster) server-side.
* Absent => the import-from-a-channel affordance is hidden; single add still works. */
addMembers?(threadId: string, userIds: string[]): Promise<BulkAddResult>;
/** Remove a person from a group or channel. */
removeMember?(threadId: string, userId: string): Promise<void>;
@@ -1,6 +1,7 @@
import type { MessagingAdapter } from '../adapter';
import type {
Attachment,
BulkAddResult,
ChannelSummary,
ChannelVisibility,
Conversation,
@@ -168,6 +169,22 @@ export class MockAdapter implements MessagingAdapter {
if (t && !t.participants.includes(userId)) t.participants = [...t.participants, userId];
}
/** Bulk add, mirroring the live door: already-members come back as `skipped`, never re-added. */
async addMembers(threadId: string, userIds: string[]): Promise<BulkAddResult> {
const t = this.threads.get(threadId);
if (!t) return { added: [], skipped: [], failed: [...userIds] };
const added: string[] = [];
const skipped: string[] = [];
for (const id of [...new Set(userIds)]) {
if (t.participants.includes(id)) skipped.push(id);
else {
t.participants = [...t.participants, id];
added.push(id);
}
}
return { added, skipped, failed: [] };
}
async removeMember(threadId: string, userId: string): Promise<void> {
const t = this.threads.get(threadId);
if (t) t.participants = t.participants.filter((p) => p !== userId);
@@ -253,8 +270,9 @@ export class MockAdapter implements MessagingAdapter {
// No-op: nobody is typing back in a mock.
}
async markRead(): Promise<void> {
// No-op: the mock has no second party to report a read.
/** Echo a receipt the way a real server does, so the "ignore my own read" path is exercised. */
async markRead(threadId: string, messageId: string): Promise<void> {
this.emit(threadId, { kind: 'receipt', messageId, actorId: ME });
}
isConnected(): boolean {
@@ -0,0 +1,79 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { Composer } from './composer';
function mount(onSend = vi.fn().mockResolvedValue(undefined)) {
render(<Composer members={[]} canUpload={false} upload={vi.fn()} onSend={onSend} />);
return { onSend, box: screen.getByLabelText('Message') as HTMLTextAreaElement };
}
describe('<Composer /> formatting + native text services', () => {
it('is a textarea with the platform spellchecker enabled', () => {
const { box } = mount();
expect(box.tagName).toBe('TEXTAREA');
// The red squiggle + right-click suggestions come from the OS via these attributes.
expect(box.getAttribute('spellcheck')).toBe('true');
expect(box.getAttribute('autocorrect')).toBe('on');
});
it('does NOT reuse .miu-textarea — that class belongs to the inbox mail composer', () => {
// Regression: sharing it let the mail rule (resize: vertical; min-height: 90px), which is
// declared later in the stylesheet, win at equal specificity and inflate the chat composer.
const { box } = mount();
expect(box.classList.contains('miu-composer-box')).toBe(true);
expect(box.classList.contains('miu-textarea')).toBe(false);
});
it('Enter sends, Shift+Enter does not (it makes a newline)', async () => {
const { onSend, box } = mount();
fireEvent.change(box, { target: { value: 'hello' } });
fireEvent.keyDown(box, { key: 'Enter', shiftKey: true });
expect(onSend).not.toHaveBeenCalled();
fireEvent.keyDown(box, { key: 'Enter' });
await waitFor(() => expect(onSend).toHaveBeenCalledWith('hello', expect.anything()));
});
it('does not send mid-IME composition', () => {
const { onSend, box } = mount();
fireEvent.change(box, { target: { value: 'にほん' } });
fireEvent.keyDown(box, { key: 'Enter', isComposing: true });
expect(onSend).not.toHaveBeenCalled();
});
it('a toolbar button wraps the current selection in its marker', () => {
const { box } = mount();
fireEvent.change(box, { target: { value: 'make me bold' } });
box.setSelectionRange(8, 12); // "bold"
fireEvent.click(screen.getByLabelText('Bold (⌘B)'));
expect(box.value).toBe('make me *bold*');
});
it('⌘B / ⌘I wrap the selection too', () => {
const { box } = mount();
fireEvent.change(box, { target: { value: 'hello world' } });
box.setSelectionRange(0, 5);
fireEvent.keyDown(box, { key: 'b', metaKey: true });
expect(box.value).toBe('*hello* world');
box.setSelectionRange(8, 13); // "world" shifted by the two markers
fireEvent.keyDown(box, { key: 'i', ctrlKey: true });
expect(box.value).toBe('*hello* _world_');
});
it('with nothing selected, a marker pair is inserted at the caret', () => {
const { box } = mount();
fireEvent.change(box, { target: { value: 'ab' } });
box.setSelectionRange(2, 2);
fireEvent.click(screen.getByLabelText('Italic (⌘I)'));
expect(box.value).toBe('ab__');
});
it('sends the raw markers as plain text — formatting is a render concern', async () => {
const { onSend, box } = mount();
fireEvent.change(box, { target: { value: 'ship *today*' } });
fireEvent.keyDown(box, { key: 'Enter' });
await waitFor(() => expect(onSend).toHaveBeenCalledWith('ship *today*', expect.anything()));
});
});
@@ -1,4 +1,4 @@
import { useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from 'react';
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from 'react';
import {
SPECIAL_MENTIONS,
insertMention,
@@ -13,6 +13,17 @@ interface Suggestion {
insert: string;
}
/** Keyboard shortcut → the marker it wraps the selection in. */
const SHORTCUTS: Record<string, string> = { b: '*', i: '_', e: '`' };
/** Toolbar affordances for the same markers (strikethrough is button-only — no common shortcut). */
const FORMAT_BUTTONS: Array<{ marker: string; label: string; title: string }> = [
{ marker: '*', label: 'B', title: 'Bold (⌘B)' },
{ marker: '_', label: 'I', title: 'Italic (⌘I)' },
{ marker: '~', label: 'S', title: 'Strikethrough' },
{ marker: '`', label: '‹›', title: 'Code (⌘E)' },
];
/**
* The message input: draft, @mention autocomplete, and attachment staging. Shared by the main
* Thread and the ThreadPane (which passes a parentInteractionId so a reply lands in the thread).
@@ -24,7 +35,7 @@ export function Composer({
onSend,
onTyping,
parentInteractionId,
placeholder = 'Type a message… @ to mention',
placeholder = 'Type a message… @ to mention, *bold*',
}: {
members: Person[];
canUpload: boolean;
@@ -40,6 +51,39 @@ export function Composer({
const [uploading, setUploading] = useState(false);
const [uploadingName, setUploadingName] = useState<string | null>(null);
const fileRef = useRef<HTMLInputElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null);
// Grow with the content up to the CSS max-height, then scroll — a chat box, not a fixed field.
// The box is border-box, but scrollHeight excludes the border, so add it back or every measure
// lands a couple of pixels short and the textarea shows a scrollbar it doesn't need.
useEffect(() => {
const el = inputRef.current;
if (!el) return;
el.style.height = 'auto';
const border = el.offsetHeight - el.clientHeight;
el.style.height = `${el.scrollHeight + border}px`;
}, [draft]);
/**
* Wrap the current selection in a marker (or, with nothing selected, drop in an empty pair and
* park the caret inside). Text stays plain — the marker characters ARE the format, so this never
* needs a rich-text model and the native spellchecker keeps working on the raw string.
*/
function wrapSelection(marker: string): void {
const el = inputRef.current;
if (!el) return;
const start = el.selectionStart ?? draft.length;
const end = el.selectionEnd ?? start;
const selected = draft.slice(start, end);
const next = `${draft.slice(0, start)}${marker}${selected}${marker}${draft.slice(end)}`;
setDraft(next);
// Restore a sensible selection after React re-renders the value.
const caret = selected ? start + marker.length + selected.length + marker.length : start + marker.length;
requestAnimationFrame(() => {
el.focus();
el.setSelectionRange(selected ? start + marker.length : caret, selected ? caret - marker.length : caret);
});
}
const query = trailingMentionQuery(draft);
const suggestions = useMemo<Suggestion[]>(() => {
@@ -93,10 +137,26 @@ export function Composer({
}
}
function onKeyDown(e: KeyboardEvent<HTMLInputElement>): void {
if (showSuggest && e.key === 'Enter') {
function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>): void {
// Formatting shortcuts, matching the toolbar. Cmd on macOS, Ctrl elsewhere.
if (e.metaKey || e.ctrlKey) {
const marker = SHORTCUTS[e.key.toLowerCase()];
if (marker) {
e.preventDefault();
wrapSelection(marker);
return;
}
}
if (e.key !== 'Enter') return;
if (showSuggest) {
e.preventDefault();
pick(suggestions[0]!.insert);
return;
}
// Enter sends; Shift+Enter (and IME composition) inserts a newline.
if (!e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault();
void submit();
}
}
@@ -125,6 +185,13 @@ export function Composer({
</button>
</div>
) : null}
<div className="miu-format-bar" role="group" aria-label="Formatting">
{FORMAT_BUTTONS.map((b) => (
<button key={b.marker} type="button" className="miu-format-btn" title={b.title} aria-label={b.title} onClick={() => wrapSelection(b.marker)}>
{b.label}
</button>
))}
</div>
<div className="miu-composer-row">
{canUpload ? (
<>
@@ -134,11 +201,18 @@ export function Composer({
</button>
</>
) : null}
<input
className="miu-input"
<textarea
ref={inputRef}
className="miu-input miu-composer-box"
value={draft}
placeholder={placeholder}
aria-label="Message"
rows={1}
// Native platform text services: the browser/OS supplies the red squiggle, the right-click
// suggestions and "Add to dictionary", and mobile keyboards add autocorrect. Nothing to ship.
spellCheck
autoCorrect="on"
autoCapitalize="sentences"
onChange={(e) => {
setDraft(e.target.value);
onTyping?.();
@@ -1,4 +1,5 @@
import type { Conversation } from '../types';
import { stripMarkup } from '../rich-text';
/** Initials for the avatar chip — first letters of the first two words. */
function initials(title: string): string {
@@ -37,7 +38,7 @@ export function ConversationList({
</span>
<span className="miu-convrow-main">
<span className="miu-convrow-title">{c.title}</span>
{c.lastMessage ? <span className="miu-convrow-preview">{c.lastMessage}</span> : null}
{c.lastMessage ? <span className="miu-convrow-preview">{stripMarkup(c.lastMessage)}</span> : null}
</span>
{c.unread > 0 ? (
<span className="miu-badge" aria-label={`${c.unread} unread`}>
@@ -37,4 +37,61 @@ describe('<ConversationSettings />', () => {
expect((await a.listMembers('th_mock_2')).some((m) => m.id === 'pp_sofia')).toBe(true);
});
});
it('“#” switches the picker to channels you belong to, excluding this one', async () => {
mount();
await screen.findByText('Dan Whitaker');
fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
// Channels the mock user is in show up as import sources…
await screen.findByText('#general');
// …and the conversation being edited is never offered as its own source.
expect(screen.queryByText('#Storm crew')).toBeNull();
});
it('imports a channel roster only after confirmation, and reports what landed', async () => {
const a = mount();
await screen.findByText('Dan Whitaker');
const before = (await a.listMembers('th_mock_2')).length;
fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
fireEvent.click(await screen.findByText('#general'));
// Staged, NOT applied — picking a channel must not mutate membership on its own.
const confirm = await screen.findByRole('button', { name: /^Add \d+$/ });
expect((await a.listMembers('th_mock_2')).length).toBe(before);
fireEvent.click(confirm);
await waitFor(async () => {
expect((await a.listMembers('th_mock_2')).length).toBeGreaterThan(before);
});
await screen.findByText(/Added \d+/);
});
it('cancelling a staged import leaves membership untouched', async () => {
const a = mount();
await screen.findByText('Dan Whitaker');
const before = (await a.listMembers('th_mock_2')).length;
fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
fireEvent.click(await screen.findByText('#general'));
fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }));
await screen.findByLabelText('Search people'); // back to the picker
expect((await a.listMembers('th_mock_2')).length).toBe(before);
});
it('hides the channel-import affordance when the adapter cannot bulk-add', async () => {
const a = new MockAdapter();
// A host that implements single add but not addMembers => no import path offered.
(a as { addMembers?: unknown }).addMembers = undefined;
render(
<MessagingProvider adapter={a}>
<ConversationSettings threadId="th_mock_2" title="Storm crew" membership="group" onClose={() => {}} />
</MessagingProvider>,
);
await screen.findByText('Dan Whitaker');
expect(screen.getByLabelText('Search people').getAttribute('placeholder')).toBe('Search people…');
fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
expect(screen.queryByText('#general')).toBeNull(); // '#' is just a search string here
});
});
@@ -1,7 +1,17 @@
import { useEffect, useMemo, useState } from 'react';
import { useAdapter } from '../provider';
import { useConversations } from '../hooks/use-conversations';
import { ModalPortal } from './modal-portal';
import type { Person } from '../types';
import type { BulkAddResult, Conversation, Person } from '../types';
/** A source channel the caller belongs to, staged for a roster import once its members are read. */
interface PendingImport {
source: Conversation;
/** Members of the source who are NOT already here — the ones an import would actually add. */
newcomers: Person[];
/** Members of the source already in this conversation; reported so the count is never surprising. */
alreadyHere: number;
}
/**
* Settings for a group or channel (public + private): rename, member list, add/remove people, and
@@ -30,9 +40,23 @@ export function ConversationSettings({
const [error, setError] = useState<string | null>(null);
const [nonce, setNonce] = useState(0);
const [pending, setPending] = useState<PendingImport | null>(null);
const [imported, setImported] = useState<BulkAddResult | null>(null);
const { conversations } = useConversations();
const canManage = typeof adapter.addMember === 'function' && typeof adapter.removeMember === 'function';
const canRename = typeof adapter.renameConversation === 'function';
const canLeave = membership === 'channel' && typeof adapter.leaveChannel === 'function';
// Importing a roster needs both halves: read the source's members, and bulk-add them here.
const canImport = typeof adapter.addMembers === 'function' && typeof adapter.listMembers === 'function';
// The channels you belong to are the only valid import sources — this list is already
// membership-scoped (it is your own conversation list), so private channels appear iff you're in
// them, and the server re-checks the source-membership rule on the roster read regardless.
const sourceChannels = useMemo(
() => conversations.filter((c) => c.membership === 'channel' && c.threadId !== threadId),
[conversations, threadId],
);
useEffect(() => {
let alive = true;
@@ -51,7 +75,41 @@ export function ConversationSettings({
}, [adapter, threadId, nonce]);
const memberIds = useMemo(() => new Set(members.map((m) => m.id)), [members]);
// A leading '#' switches the picker from people to channels — the roster-import affordance.
const channelMode = canImport && q.trim().startsWith('#');
const channelQuery = q.trim().slice(1).toLowerCase();
const addable = directory.filter((p) => !memberIds.has(p.id) && p.name.toLowerCase().includes(q.trim().toLowerCase()));
const matchingChannels = sourceChannels.filter((c) => c.title.toLowerCase().includes(channelQuery));
/** Stage an import: read the source roster, then diff it against who is already here. */
async function stageImport(source: Conversation): Promise<void> {
setBusy(true);
setError(null);
try {
const roster = await adapter.listMembers!(source.threadId);
setPending({
source,
newcomers: roster.filter((p) => !memberIds.has(p.id)),
alreadyHere: roster.filter((p) => memberIds.has(p.id)).length,
});
} catch (e) {
setError(e instanceof Error ? e.message : String(e));
} finally {
setBusy(false);
}
}
/** Commit the staged import. One bulk call; the result reports what actually landed. */
async function confirmImport(): Promise<void> {
if (!pending) return;
const ids = pending.newcomers.map((p) => p.id);
await run(async () => {
const res = await adapter.addMembers!(threadId, ids);
setImported(res);
setPending(null);
setQ('');
});
}
async function run(fn: () => Promise<void>): Promise<void> {
setBusy(true);
@@ -109,11 +167,51 @@ export function ConversationSettings({
</div>
</div>
{canManage ? (
{canManage && pending ? (
// Confirm step — an import is an administrative action, so it never fires on a stray click.
<div className="miu-field">
<span className="miu-field-lbl">Add from #{pending.source.title}</span>
{pending.newcomers.length === 0 ? (
<div className="miu-empty">Everyone from #{pending.source.title} is already here.</div>
) : (
<div className="miu-empty">
Add {pending.newcomers.length} {pending.newcomers.length === 1 ? 'person' : 'people'} from #{pending.source.title}?
{pending.alreadyHere > 0 ? ` (${pending.alreadyHere} already here)` : ''}
</div>
)}
<div className="miu-composer-row">
<button type="button" className="miu-tab" disabled={busy} onClick={() => setPending(null)}>Cancel</button>
<button type="button" className="miu-send" disabled={busy || pending.newcomers.length === 0} onClick={() => void confirmImport()}>
Add {pending.newcomers.length > 0 ? pending.newcomers.length : ''}
</button>
</div>
</div>
) : null}
{canManage && !pending ? (
<div className="miu-field">
<span className="miu-field-lbl">Add people</span>
<input className="miu-input" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" aria-label="Search people" />
<input
className="miu-input"
value={q}
onChange={(e) => { setQ(e.target.value); setImported(null); }}
placeholder={canImport ? 'Search people… or # for a channel' : 'Search people…'}
aria-label="Search people"
/>
<div className="miu-settings-list">
{channelMode ? (
<>
{matchingChannels.length === 0 ? <div className="miu-empty">No channels to add from.</div> : null}
{matchingChannels.slice(0, 25).map((c) => (
<button key={c.threadId} type="button" className="miu-settings-member is-add" disabled={busy} onClick={() => void stageImport(c)}>
<span className="miu-settings-name">#{c.title}</span>
<span className="miu-pill">channel</span>
<span className="miu-settings-plus" aria-hidden="true"></span>
</button>
))}
</>
) : (
<>
{addable.length === 0 ? <div className="miu-empty">No one to add.</div> : null}
{addable.slice(0, 25).map((p) => (
<button key={p.id} type="button" className="miu-settings-member is-add" disabled={busy} onClick={() => void run(() => adapter.addMember!(threadId, p.id))}>
@@ -122,10 +220,20 @@ export function ConversationSettings({
<span className="miu-settings-plus" aria-hidden="true"></span>
</button>
))}
</>
)}
</div>
</div>
) : null}
{imported ? (
<div className="miu-empty">
Added {imported.added.length}
{imported.skipped.length > 0 ? ` · ${imported.skipped.length} already a member` : ''}
{imported.failed.length > 0 ? ` · ${imported.failed.length} failed` : ''}
</div>
) : null}
{error ? <div className="miu-empty miu-error">{error}</div> : null}
</div>
<div className="miu-modal-foot">
@@ -1,5 +1,5 @@
import { useRef, useState } from 'react';
import { highlightMentions } from '../mentions';
import { renderRichText } from '../rich-text';
import { PopoverPortal } from './popover-portal';
import type { Attachment } from '../types';
import type { UiMessage } from '../hooks/use-messages';
@@ -65,7 +65,7 @@ export function MessageItem({
<div className={`miu-msg${message.mine ? ' is-mine' : ''}${message.pending ? ' is-pending' : ''}`}>
<div className="miu-bubble-row">
<div className="miu-bubble">
{m.text ? highlightMentions(m.text, memberNames) : null}
{m.text ? renderRichText(m.text, memberNames) : null}
{m.attachment ? <AttachmentView att={m.attachment} /> : null}
</div>
<time className="miu-msg-time" dateTime={m.at} title={Number.isNaN(+new Date(m.at)) ? '' : new Date(m.at).toLocaleString()}>
@@ -158,3 +158,39 @@ describe('useMessages', () => {
}
});
});
describe('read receipts', () => {
// REGRESSION: the hook reported a read of the newest message regardless of author, so sending a
// message made the server echo a receipt for it and the sender's own bubble showed "Seen"
// immediately — in DMs, groups and channels alike, before anyone had opened it.
it('never reports a read of my own message', async () => {
const adapter = new MockAdapter();
const markRead = vi.spyOn(adapter, 'markRead');
const { result } = renderHook(() => useMessages('th_mock_1'), { wrapper: wrap(adapter) });
await waitFor(() => expect(result.current.loading).toBe(false));
markRead.mockClear();
await act(async () => {
await result.current.send('a message from me');
});
// The newest message is now mine — reading it would be reading myself.
const mine = result.current.messages.filter((m) => m.mine).map((m) => m.id);
for (const call of markRead.mock.calls) expect(mine).not.toContain(call[1]);
});
it('does not mark my message seen just because the receipt came back', async () => {
const adapter = new MockAdapter();
const { result } = renderHook(() => useMessages('th_mock_1'), { wrapper: wrap(adapter) });
await waitFor(() => expect(result.current.loading).toBe(false));
await act(async () => {
await result.current.send('hello there');
});
const mine = result.current.messages.find((m) => m.mine && m.text === 'hello there');
expect(mine).toBeDefined();
expect(result.current.seenIds.has(mine!.id)).toBe(false);
});
});
@@ -160,13 +160,19 @@ export function useMessages(threadId: string | null): MessagesState {
if (threadId) adapter.sendTyping(threadId);
}, [adapter, threadId]);
// The newest acknowledged (non-pending) message id — what we report as read.
// The newest acknowledged (non-pending) message id from SOMEONE ELSE — what we report as read.
//
// Skipping my own messages is load-bearing, not tidiness: reporting a read of the message I just
// sent makes the server broadcast a receipt for it, and the sender's own client then paints it
// "Seen" the instant it is delivered, before anyone has looked at it.
const lastReadableId = useMemo(() => {
for (let i = raw.length - 1; i >= 0; i--) {
if (!raw[i]!.pending) return raw[i]!.id;
const m = raw[i]!;
if (m.pending || isOwnMessage(m, currentActorId)) continue;
return m.id;
}
return null;
}, [raw]);
}, [raw, currentActorId]);
// Report my read of the newest message (drives the other side's "seen" tick).
// Keyed on the id, not the whole array, so reaction/optimistic churn doesn't re-fire it.
+3
View File
@@ -9,6 +9,8 @@ export { useMessages } from './hooks/use-messages';
export { useChannels } from './hooks/use-channels';
export { useMembers } from './hooks/use-members';
export { isOwnMessage } from './types';
// Message-body markup (bold/italic/strike/code/links + mentions) as a safe ReactNode tree.
export { renderRichText, safeHref, stripMarkup } from './rich-text';
// Rendered UI. Pair with the './styles.css' export (or override the --miu-* tokens).
export { Messenger } from './components/messenger';
@@ -30,6 +32,7 @@ export type { MessagesState, UiMessage } from './hooks/use-messages';
export type { ChannelsState } from './hooks/use-channels';
export type {
Attachment,
BulkAddResult,
ChannelSummary,
ChannelVisibility,
Conversation,
@@ -0,0 +1,95 @@
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { renderRichText, safeHref, stripMarkup } from './rich-text';
function show(text: string, names: string[] = []) {
render(<div data-testid="out">{renderRichText(text, names)}</div>);
return screen.getByTestId('out');
}
describe('renderRichText', () => {
it('renders bold, italic and strikethrough', () => {
const el = show('*bold* _italic_ ~gone~');
expect(el.querySelector('strong')?.textContent).toBe('bold');
expect(el.querySelector('em')?.textContent).toBe('italic');
expect(el.querySelector('del')?.textContent).toBe('gone');
});
it('nests styles', () => {
const el = show('*bold with _italic_ inside*');
const strong = el.querySelector('strong');
expect(strong?.textContent).toBe('bold with italic inside');
expect(strong?.querySelector('em')?.textContent).toBe('italic');
});
it('leaves markup inside code completely literal', () => {
const el = show('use `*not bold*` here');
expect(el.querySelector('code')?.textContent).toBe('*not bold*');
expect(el.querySelector('strong')).toBeNull();
});
it('renders a fenced code block', () => {
const el = show('```\nconst a = 1;\n```');
expect(el.querySelector('pre.miu-code-block')?.textContent).toBe('const a = 1;\n');
expect(el.querySelector('code')).not.toBeNull();
});
it('does not treat arithmetic or a lone marker as formatting', () => {
const el = show('5 * 3 = 15 and a lone * plus snake_case_name');
expect(el.querySelector('strong')).toBeNull();
expect(el.querySelector('em')).toBeNull();
expect(el.textContent).toBe('5 * 3 = 15 and a lone * plus snake_case_name');
});
it('linkifies http(s) and www URLs without swallowing trailing punctuation', () => {
const el = show('see https://example.com/a?b=1, ok');
const a = el.querySelector('a');
expect(a?.getAttribute('href')).toBe('https://example.com/a?b=1');
expect(a?.textContent).toBe('https://example.com/a?b=1');
expect(a?.getAttribute('rel')).toContain('noopener');
expect(el.textContent).toContain(', ok');
});
it('never renders a javascript: URL as a link (XSS guard)', () => {
expect(safeHref('javascript:alert(1)')).toBeNull();
expect(safeHref('data:text/html,<script>')).toBeNull();
expect(safeHref('https://ok.example')).toBe('https://ok.example/');
// and it is not linkified in message text either
const el = show('javascript:alert(1)');
expect(el.querySelector('a')).toBeNull();
});
it('escapes nothing as HTML — angle brackets stay text', () => {
const el = show('<img src=x onerror=alert(1)>');
expect(el.querySelector('img')).toBeNull();
expect(el.textContent).toBe('<img src=x onerror=alert(1)>');
});
it('still highlights @mentions alongside formatting', () => {
const el = show('*hi* @Sofia Ramirez', ['Sofia Ramirez']);
expect(el.querySelector('strong')?.textContent).toBe('hi');
expect(el.querySelector('.miu-mention')?.textContent).toBe('@Sofia Ramirez');
});
it('returns plain text unchanged when there is no markup', () => {
expect(show('just a normal message').textContent).toBe('just a normal message');
});
});
describe('stripMarkup (one-line previews)', () => {
it('drops the markers so a preview never shows ~crazy~', () => {
expect(stripMarkup('~crazy~')).toBe('crazy');
expect(stripMarkup('*bold* and _italic_')).toBe('bold and italic');
});
it('unwraps code and flattens a fenced block', () => {
expect(stripMarkup('run `npm ci` now')).toBe('run npm ci now');
expect(stripMarkup('```\nconst a = 1;\n```')).toBe('const a = 1;');
});
it('handles nesting and leaves ordinary text (and identifiers) alone', () => {
expect(stripMarkup('*bold with _italic_*')).toBe('bold with italic');
expect(stripMarkup('snake_case_name and 5 * 3')).toBe('snake_case_name and 5 * 3');
expect(stripMarkup('plain preview')).toBe('plain preview');
});
});
@@ -0,0 +1,162 @@
import type { ReactNode } from 'react';
import { highlightMentions } from './mentions';
/**
* WhatsApp-style lightweight markup for message bodies.
*
* *bold* _italic_ ~strike~ `code` ```code block``` plus bare URLs
*
* Messages stay PLAIN TEXT on the wire — this only affects rendering, so nothing already stored
* breaks and a client without this build just shows the marker characters.
*
* Security: this returns a ReactNode tree and never touches dangerouslySetInnerHTML, so message
* text can never inject markup. The one genuinely dangerous surface is links, where an attacker
* could otherwise smuggle `javascript:` — {@link safeHref} allows only http/https/mailto.
*
* Precedence (deliberate): code is tokenized first and its contents are left completely alone, so
* `*not bold*` inside backticks stays literal. Everything else may nest (*bold with _italic_*).
*/
/** Only protocols that cannot execute script. Anything else renders as plain text, not a link. */
export function safeHref(raw: string): string | null {
try {
const url = new URL(raw);
return ['http:', 'https:', 'mailto:'].includes(url.protocol) ? url.href : null;
} catch {
return null;
}
}
// A bare URL: stops before trailing punctuation so "see https://x.com." doesn't swallow the period.
const URL_RE = /\bhttps?:\/\/[^\s<>()]+[^\s<>().,;:!?'"]|\bwww\.[^\s<>()]+[^\s<>().,;:!?'"]/g;
interface Rule {
/** The wrapping marker, e.g. '*' for bold. */
marker: string;
tag: 'strong' | 'em' | 'del';
}
const RULES: Rule[] = [
{ marker: '*', tag: 'strong' },
{ marker: '_', tag: 'em' },
{ marker: '~', tag: 'del' },
];
/** Escape a marker so it is literal inside a RegExp. */
function esc(s: string): string {
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
/**
* Find the first inline span (`*bold*`, `_italic_`, `~strike~`) in `text`.
*
* Two guards keep everyday prose from being mangled:
* - the content must not start or end with whitespace, so "5 * 3 = 15" and a lone `*` are inert;
* - the markers must sit on word boundaries, so `snake_case_name` is NOT italicised (the bug
* every naive markdown renderer ships with).
*/
function firstSpan(text: string): { start: number; end: number; rule: Rule; inner: string } | null {
let best: { start: number; end: number; rule: Rule; inner: string } | null = null;
for (const rule of RULES) {
const m = esc(rule.marker);
// (lead)(marker)(inner)(marker) — `lead` keeps the boundary char out of the match itself.
const re = new RegExp(`(^|[^\\w${m}])${m}(?=\\S)([^${m}]*[^\\s${m}])${m}(?![\\w${m}])`);
const found = re.exec(text);
if (!found) continue;
const start = found.index + (found[1]?.length ?? 0);
if (best === null || start < best.start) {
best = { start, end: found.index + found[0].length, rule, inner: found[2] ?? '' };
}
}
return best;
}
/**
* The same text with its formatting markers removed, for places that show a one-line plain-text
* preview (conversation list, notifications) where `~crazy~` must read as "crazy" — you cannot
* render nodes into those, so the markers have to come off rather than be styled.
*/
export function stripMarkup(text: string): string {
const noCode = text
.replace(/```([\s\S]*?)```/g, (_m, code: string) => code.trim())
.replace(/`([^`\n]+)`/g, '$1');
return stripSpans(noCode);
}
/** Recursively drop *bold* / _italic_ / ~strike~ markers, honouring the same word-boundary rule. */
function stripSpans(text: string): string {
const span = firstSpan(text);
if (!span) return text;
return text.slice(0, span.start) + stripSpans(span.inner) + stripSpans(text.slice(span.end));
}
/** Linkify + mention-highlight a run of text that carries no other markup. */
function plain(text: string, memberNames: string[], keyed: () => string): ReactNode[] {
const out: ReactNode[] = [];
let last = 0;
let m: RegExpExecArray | null;
URL_RE.lastIndex = 0;
while ((m = URL_RE.exec(text)) !== null) {
if (m.index > last) out.push(...highlightMentions(text.slice(last, m.index), memberNames));
const raw = m[0];
const href = safeHref(raw.startsWith('www.') ? `https://${raw}` : raw);
out.push(
href ? (
<a key={keyed()} className="miu-link" href={href} target="_blank" rel="noopener noreferrer nofollow">
{raw}
</a>
) : (
raw
),
);
last = m.index + raw.length;
}
if (last < text.length) out.push(...highlightMentions(text.slice(last), memberNames));
return out;
}
/** Tokenize one segment that is known to contain no code, recursing so styles can nest. */
function inline(text: string, memberNames: string[], keyed: () => string): ReactNode[] {
const span = firstSpan(text);
if (!span) return plain(text, memberNames, keyed);
const { start, end, rule, inner } = span;
const Tag = rule.tag;
return [
...(start > 0 ? inline(text.slice(0, start), memberNames, keyed) : []),
<Tag key={keyed()}>{inline(inner, memberNames, keyed)}</Tag>,
...(end < text.length ? inline(text.slice(end), memberNames, keyed) : []),
];
}
/**
* Render message text as a safe ReactNode tree: code first (its contents stay literal), then
* nested bold/italic/strike, then links and @mentions.
*/
export function renderRichText(text: string, memberNames: string[] = []): ReactNode[] {
let n = 0;
const keyed = (): string => `rt${n++}`;
const out: ReactNode[] = [];
// ```block``` or `inline` — matched together so the longer fence wins.
const CODE_RE = /```([\s\S]+?)```|`([^`\n]+)`/g;
let last = 0;
let m: RegExpExecArray | null;
while ((m = CODE_RE.exec(text)) !== null) {
if (m.index > last) out.push(...inline(text.slice(last, m.index), memberNames, keyed));
if (m[1] !== undefined) {
out.push(
<pre key={keyed()} className="miu-code-block">
<code>{m[1].replace(/^\n/, '')}</code>
</pre>,
);
} else {
out.push(
<code key={keyed()} className="miu-code">
{m[2]}
</code>,
);
}
last = m.index + m[0].length;
}
if (last < text.length) out.push(...inline(text.slice(last), memberNames, keyed));
return out.length > 0 ? out : [text];
}
+84 -1
View File
@@ -10,6 +10,8 @@
--miu-accent: #fda913;
--miu-accent-text: #1a1206;
--miu-radius: 12px;
/* Collapsed composer height — textarea, attach and send all use this so they never diverge. */
--miu-composer-h: 38px;
display: flex;
height: 100%;
@@ -371,13 +373,17 @@
.miu-composer-row {
display: flex;
gap: 8px;
/* Pin the controls to the bottom so a growing textarea never stretches them (WhatsApp). */
align-items: flex-end;
}
.miu-file-input {
display: none;
}
.miu-attach-btn {
flex-shrink: 0;
width: 38px;
box-sizing: border-box;
width: var(--miu-composer-h);
height: var(--miu-composer-h);
border-radius: 10px;
border: 1px solid var(--miu-border);
background: var(--miu-panel);
@@ -515,6 +521,78 @@ button.miu-attach-dl:hover {
.miu-input:focus {
border-color: var(--miu-accent);
}
/* Chat box: one row by default, grows with content (JS sets height), then scrolls.
border-box so min/max-height are the REAL height — under the default content-box the padding
and border are added on top, which made a "38px" box render ~58px and dragged the row with it. */
/* Composer box only. NOTE: .miu-textarea is already taken by the inbox mail composer further
down (resize: vertical; min-height: 90px) — sharing it made that rule win and blow this up. */
.miu-composer-box {
box-sizing: border-box;
resize: none;
/* Collapsed height must equal the single-line <input> this replaced: 20px of line + 16px
padding + 2px border = 38px. Padding is tightened from .miu-input's 9px so a 14px/1.4 line
fits the content box exactly — at 9px it overflowed and forced a scrollbar. */
padding: 8px 12px;
line-height: 1.4;
min-height: var(--miu-composer-h);
max-height: 160px;
overflow-y: auto;
font-family: inherit;
}
.miu-format-bar {
display: flex;
gap: 2px;
padding: 0 2px 4px;
}
.miu-format-btn {
min-width: 26px;
height: 24px;
padding: 0 6px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--miu-muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.miu-format-btn:hover {
background: var(--miu-panel-2);
color: var(--miu-text);
}
/* ── Rendered message formatting ── */
.miu-code {
padding: 1px 5px;
border-radius: 5px;
background: var(--miu-panel-2);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
}
.miu-code-block {
margin: 6px 0 2px;
padding: 8px 10px;
border-radius: 8px;
background: var(--miu-panel-2);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
white-space: pre-wrap;
overflow-x: auto;
}
.miu-link {
color: var(--miu-accent);
text-decoration: underline;
}
.miu-msg.is-mine .miu-bubble .miu-link {
color: var(--miu-accent-text);
}
/* On your own (accent-filled) bubble the panel background would sit dark-on-dark against the dark
accent text — tint the bubble instead so the chip reads on any accent colour. */
.miu-msg.is-mine .miu-bubble .miu-code,
.miu-msg.is-mine .miu-bubble .miu-code-block {
background: rgba(0, 0, 0, 0.16);
color: var(--miu-accent-text);
}
.miu-send {
padding: 0 16px;
border-radius: 10px;
@@ -524,6 +602,11 @@ button.miu-attach-dl:hover {
color: var(--miu-accent-text);
background: var(--miu-accent);
}
.miu-composer .miu-send {
box-sizing: border-box;
flex-shrink: 0;
height: var(--miu-composer-h);
}
.miu-send:disabled {
opacity: 0.5;
cursor: not-allowed;
+10
View File
@@ -24,6 +24,16 @@ export interface Conversation {
topic?: string | null;
}
/**
* Outcome of a bulk member import, reported per user so a partial result is never silent.
* `skipped` were already members (which makes a repeat import a no-op); `failed` could not be added.
*/
export interface BulkAddResult {
added: string[];
skipped: string[];
failed: string[];
}
/** A discoverable channel (from browseChannels) — includes ones the caller has NOT joined. */
export interface ChannelSummary {
threadId: string;
@@ -159,7 +159,9 @@ export class MessageGateway implements OnGatewayInit, OnGatewayConnection, OnGat
async read(@ConnectedSocket() client: Socket, @MessageBody() body: { threadId: string; interactionId: string }) {
const { principal } = client.data as SocketState;
const r = await this.messages.markRead(body.threadId, principal, body.interactionId);
this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, kind: 'READ' });
// userId as well as actorId: actorId is an IIOS actor UUID, but clients hold the caller's
// USERID, so without this they cannot tell their own receipt from someone else's.
this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, userId: principal.userId, kind: 'READ' });
return { ok: true };
}
@@ -167,7 +169,9 @@ export class MessageGateway implements OnGatewayInit, OnGatewayConnection, OnGat
async delivered(@ConnectedSocket() client: Socket, @MessageBody() body: { threadId: string; interactionId: string }) {
const { principal } = client.data as SocketState;
const r = await this.messages.markDelivered(body.threadId, principal, body.interactionId);
this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, kind: 'DELIVERED' });
// userId as well as actorId: actorId is an IIOS actor UUID, but clients hold the caller's
// USERID, so without this they cannot tell their own receipt from someone else's.
this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, userId: principal.userId, kind: 'DELIVERED' });
return { ok: true };
}
@@ -1,5 +1,5 @@
import { randomUUID } from 'node:crypto';
import { Inject, Injectable, NotFoundException } from '@nestjs/common';
import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
import { Prisma } from '@prisma/client';
import { CloudEvent, IIOS_EVENTS, IiosPlatformPorts } from '@insignia/iios-contracts';
import { PrismaService } from '../prisma/prisma.service';
@@ -74,6 +74,10 @@ export interface OpenThreadResult {
*/
@Injectable()
export class MessageService {
/** Ceiling on one bulk participant import — bounds the work per request and the blast radius of a
* mistaken import. Raise here if a larger roster copy is ever needed. */
static readonly MAX_BULK_PARTICIPANTS = 200;
constructor(
private readonly prisma: PrismaService,
@Inject(PLATFORM_PORTS) private readonly ports: IiosPlatformPorts,
@@ -167,6 +171,76 @@ export class MessageService {
return { threadId, participantCount: participantCount + 1 };
}
/**
* Bulk sibling of {@link addParticipant}: add many users in ONE governed operation. The app uses
* this to import a roster (e.g. "add everyone from that channel"); the kernel stays generic — it
* receives an explicit list of userIds and never learns where the list came from.
*
* Deliberately NOT atomic: a single unresolvable user must not sink the whole import, so each is
* attempted independently and the outcome is reported per user. Already-members are `skipped`,
* which makes a re-run a no-op.
*/
async addParticipants(
threadId: string,
principal: MessagePrincipal,
targetUserIds: string[],
role = 'MEMBER',
): Promise<{ threadId: string; added: string[]; skipped: string[]; failed: string[]; participantCount: number }> {
const unique = [...new Set(targetUserIds.map((u) => u.trim()).filter(Boolean))];
if (unique.length === 0) throw new BadRequestException('at least one userId is required');
if (unique.length > MessageService.MAX_BULK_PARTICIPANTS) {
throw new BadRequestException(`at most ${MessageService.MAX_BULK_PARTICIPANTS} participants can be added at once`);
}
const thread = await this.prisma.iiosThread.findUnique({ where: { id: threadId } });
if (!thread) throw new NotFoundException('thread not found');
const caller = await this.actors.resolveActor(thread.scopeId, principal);
const callerP = await this.prisma.iiosThreadParticipant.findUnique({ where: { threadId_actorId: { threadId, actorId: caller.id } } });
const participantCount = await this.prisma.iiosThreadParticipant.count({ where: { threadId } });
const membership = (thread.metadata as { membership?: string } | null)?.membership;
// ONE decision for the whole batch — `targetCount` lets policy reason about the resulting size
// (e.g. the dm two-person cap) instead of being asked the same question N times.
await decideOrThrow(this.ports, {
action: 'iios.thread.participant.add',
threadId,
scopeId: thread.scopeId,
membership,
participantCount,
callerRole: callerP?.participantRole,
targetCount: unique.length,
role,
});
const scope = await this.actors.resolveScope(principal);
const added: string[] = [];
const skipped: string[] = [];
const failed: string[] = [];
for (const targetUserId of unique) {
try {
const target = await this.actors.resolveActor(scope.id, {
userId: targetUserId,
appId: principal.appId,
orgId: principal.orgId,
tenantId: principal.tenantId,
displayName: targetUserId,
});
const existing = await this.prisma.iiosThreadParticipant.findUnique({
where: { threadId_actorId: { threadId, actorId: target.id } },
});
if (existing) {
skipped.push(targetUserId);
continue;
}
await this.actors.ensureParticipant(threadId, target.id, role);
added.push(targetUserId);
} catch {
failed.push(targetUserId);
}
}
return { threadId, added, skipped, failed, participantCount: participantCount + added.length };
}
/**
* Governed thread rename (a generic subject update). Policy decides who may rename — for a
* membership thread the dev OPA requires the caller be a group ADMIN. The kernel only writes
@@ -224,7 +298,19 @@ export class MessageService {
async listParticipants(threadId: string, principal: MessagePrincipal): Promise<Array<{ userId: string; displayName: string; role: string }>> {
const thread = await this.prisma.iiosThread.findUnique({ where: { id: threadId } });
if (!thread) throw new NotFoundException('thread not found');
await decideOrThrow(this.ports, { action: 'iios.thread.read', threadId, scopeId: thread.scopeId });
// Roster reads are membership-governed (a private channel's members must not be enumerable by
// a non-member), so the decision carries the caller's role + the thread's opaque attributes.
const caller = await this.actors.resolveActor(thread.scopeId, principal);
const callerP = await this.prisma.iiosThreadParticipant.findUnique({ where: { threadId_actorId: { threadId, actorId: caller.id } } });
const meta = thread.metadata as { membership?: string; visibility?: string } | null;
await decideOrThrow(this.ports, {
action: 'iios.thread.participant.list',
threadId,
scopeId: thread.scopeId,
membership: meta?.membership,
visibility: meta?.visibility,
callerRole: callerP?.participantRole,
});
const parts = await this.prisma.iiosThreadParticipant.findMany({
where: { threadId },
include: { actor: { include: { sourceHandle: true } } },
@@ -146,6 +146,61 @@ describe('Governed membership + replies (v1.1, policy-enforced)', () => {
expect(await prisma.iiosThreadParticipant.count({ where: { threadId } })).toBe(1);
});
it('roster reads are membership-governed: a non-member cannot list a private channels members', async () => {
const s = gov();
const { threadId: priv } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'private' }, subject: 'deals', creatorRole: 'ADMIN' });
// bob is not a member — he must not be able to enumerate who is.
await expect(s.listParticipants(priv, bob)).rejects.toBeInstanceOf(PolicyDeniedError);
await s.addParticipant(priv, alice, 'bob');
expect((await s.listParticipants(priv, bob)).map((m) => m.userId).sort()).toEqual(['alice', 'bob']);
// a PUBLIC channel's roster stays open (it is discoverable anyway)
const { threadId: pub } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'public' }, subject: 'general', creatorRole: 'ADMIN' });
expect((await s.listParticipants(pub, bob)).map((m) => m.userId)).toEqual(['alice']);
});
it('addParticipants: bulk-adds in one governed call, skipping existing members (re-run is a no-op)', async () => {
const s = gov();
const { threadId } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'private' }, subject: 'ops', creatorRole: 'ADMIN' });
await s.addParticipant(threadId, alice, 'bob'); // bob is already in
const res = await s.addParticipants(threadId, alice, ['bob', 'carol', 'dave']);
expect(res.added.sort()).toEqual(['carol', 'dave']);
expect(res.skipped).toEqual(['bob']);
expect(res.failed).toEqual([]);
expect(res.participantCount).toBe(4); // alice, bob, carol, dave
expect(await prisma.iiosThreadParticipant.count({ where: { threadId } })).toBe(4);
// idempotent: a second identical import adds nobody
const again = await s.addParticipants(threadId, alice, ['bob', 'carol', 'dave']);
expect(again.added).toEqual([]);
expect(again.skipped.sort()).toEqual(['bob', 'carol', 'dave']);
expect(await prisma.iiosThreadParticipant.count({ where: { threadId } })).toBe(4);
});
it('addParticipants is governed by the same policy as a single add (a plain member is denied)', async () => {
const s = gov();
const { threadId } = await s.openThread(null, alice, { membership: 'group', creatorRole: 'ADMIN' });
await s.addParticipant(threadId, alice, 'bob'); // bob joins as a plain MEMBER
await expect(s.addParticipants(threadId, bob, ['carol', 'dave'])).rejects.toBeInstanceOf(PolicyDeniedError);
});
it('addParticipants rejects an empty list and anything over the batch cap', async () => {
const s = gov();
const { threadId } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'private' }, creatorRole: 'ADMIN' });
await expect(s.addParticipants(threadId, alice, [])).rejects.toThrow(/at least one/i);
const tooMany = Array.from({ length: MessageService.MAX_BULK_PARTICIPANTS + 1 }, (_, n) => `user_${n}`);
await expect(s.addParticipants(threadId, alice, tooMany)).rejects.toThrow(/at most/i);
});
it('addParticipants respects the dm two-person cap for the whole batch', async () => {
const s = gov();
const { threadId } = await s.openThread(null, alice, { membership: 'dm' });
// alice is alone; adding two at once would make three — policy must deny the batch.
await expect(s.addParticipants(threadId, alice, ['bob', 'carol'])).rejects.toBeInstanceOf(PolicyDeniedError);
expect((await s.addParticipants(threadId, alice, ['bob'])).added).toEqual(['bob']);
});
it('self-join is governed: a non-member cannot open a thread by id; after being added, they can', async () => {
const s = gov();
const { threadId } = await s.openThread(null, alice, { membership: 'group', creatorRole: 'ADMIN' });
@@ -49,6 +49,29 @@ describe('DevOpaPort (dev policy plane — membership rules)', () => {
expect((await opa.decide({ action: 'iios.thread.participant.remove', callerRole: 'MEMBER' })).allow).toBe(true);
});
it('the dm cap counts the whole batch, not one add at a time', async () => {
const add = (participantCount: number, targetCount: number) =>
opa.decide({ action: 'iios.thread.participant.add', membership: 'dm', callerRole: 'MEMBER', participantCount, targetCount });
expect((await add(1, 1)).allow).toBe(true); // 1 + 1 = 2, fine
const batch = await add(1, 2); // 1 + 2 = 3 — must be denied even though count is only 1
expect(batch.allow).toBe(false);
expect(batch.obligations[0]?.reason).toMatch(/two people/);
});
it('listing a roster requires membership, except on a public channel', async () => {
const list = (extra: Record<string, unknown>) => opa.decide({ action: 'iios.thread.participant.list', ...extra });
// a private channel / group / dm: members only
const stranger = await list({ membership: 'channel', visibility: 'private', callerRole: undefined });
expect(stranger.allow).toBe(false);
expect(stranger.obligations[0]?.reason).toMatch(/not a member/);
expect((await list({ membership: 'channel', visibility: 'private', callerRole: 'MEMBER' })).allow).toBe(true);
expect((await list({ membership: 'group', callerRole: 'ADMIN' })).allow).toBe(true);
expect((await list({ membership: 'group', callerRole: undefined })).allow).toBe(false);
// a public channel's roster is open, and ungoverned threads are unchanged
expect((await list({ membership: 'channel', visibility: 'public', callerRole: undefined })).allow).toBe(true);
expect((await list({})).allow).toBe(true);
});
it('media upload allows images + docs (incl. html/markdown/csv), denies unknown types and oversize', async () => {
const up = (mime: string, sizeBytes = 1024) => opa.decide({ action: 'iios.media.upload', mime, sizeBytes });
for (const mime of ['image/png', 'video/mp4', 'audio/mpeg', 'application/pdf', 'text/plain', 'text/markdown', 'text/html', 'text/csv']) {
@@ -12,6 +12,7 @@ export interface OpaInput {
membership?: string; // app-set generic thread attribute: 'dm' | 'group' | 'channel'
visibility?: string; // 'public' | 'private' (channels)
participantCount?: number;
targetCount?: number; // how many participants a single add call is inviting (1 for a single add)
callerRole?: string; // 'MEMBER' | 'ADMIN'
alreadyMember?: boolean;
isMember?: boolean;
@@ -38,11 +39,23 @@ export class DevOpaPort {
switch (i.action) {
case 'iios.thread.participant.add': {
const count = i.participantCount ?? 0;
if (i.membership === 'dm' && count >= 2) return deny('a direct message is limited to two people');
// `targetCount` is how many are being added in this call (1 for a single add), so the dm cap
// holds for a bulk import too instead of being evaluated one-at-a-time.
if (i.membership === 'dm' && count + (i.targetCount ?? 1) > 2) return deny('a direct message is limited to two people');
if (i.callerRole !== 'MEMBER' && i.callerRole !== 'ADMIN') return deny('only a member can add participants');
if (i.membership === 'group' && i.callerRole !== 'ADMIN') return deny('only a group admin can add or remove members');
return allow();
}
case 'iios.thread.participant.list': {
// Reading a thread's ROSTER. A public channel is open (it is discoverable anyway), but every
// other membership thread — dm, group, private channel — requires you to be a member, or any
// caller in the scope could enumerate a private channel's members by id. Ungoverned threads
// (no membership attribute, e.g. support) keep the previous open behaviour.
if (!i.membership) return allow();
if (i.membership === 'channel' && i.visibility === 'public') return allow();
if (i.callerRole === 'MEMBER' || i.callerRole === 'ADMIN') return allow();
return deny('you are not a member of this thread');
}
case 'iios.thread.participant.remove': {
// Same governance as add: for a group, only an ADMIN removes members. Ungoverned
// (no membership attr) threads allow removal by any member.
@@ -70,6 +70,17 @@ export class ThreadsController {
return this.messages.addParticipant(id, this.principal(auth), body.userId, body.role);
}
/**
* Governed bulk membership: add many users in one call (e.g. importing another channel's roster).
* Reports per-user outcome — `skipped` are already members — so a partial result is never silent.
*/
@Post(':id/participants/bulk')
@HttpCode(200)
async addParticipants(@Param('id') id: string, @Body() body: { userIds?: string[]; role?: string }, @Headers('authorization') auth?: string) {
if (!Array.isArray(body?.userIds)) throw new BadRequestException('userIds must be an array');
return this.messages.addParticipants(id, this.principal(auth), body.userIds, body.role);
}
/** Members of a thread with their role — drives the group settings member list. */
@Get(':id/participants')
async listParticipants(@Param('id') id: string, @Headers('authorization') auth?: string) {