@micha.bigler/ui-core-micha 2.14.0 → 2.16.0

package/dist/messaging/MessagingProvider.js

@@ -0,0 +1,317 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
+import { AuthContext } from '../auth/AuthContext';
+import { archiveConversation, createBroadcastConversation, createGroupConversation, getReadStatus, getUnreadCount, listConversations, listMessages, listThread, patchConversationPreferences, createMessage, uploadAttachments, getAttachment, getAttachmentThumbnail, addReaction, removeReaction, createPoll, votePoll, closePoll, getConversationConfig, patchConversationConfig, } from './api';
+import { useRealtime } from '../notifications/realtime';
+const MessagingContext = createContext(null);
+export const MESSAGING_ENVELOPE = 'messaging';
+const EMPTY_CACHE = { conversations: {}, messages: {}, threads: {}, polls: {}, reactions: {}, receipts: {}, unread: { unread_count: 0, by_conversation: {} }, cursors: { conversations: null, messages: {}, threads: {} } };
+const DEFAULT_API = {
+    listConversations, listMessages, listThread, getReadStatus, getUnreadCount, archiveConversation,
+    patchConversationPreferences, createGroupConversation, createBroadcastConversation,
+    createMessage, uploadAttachments, getAttachment, getAttachmentThumbnail,
+    addReaction, removeReaction, createPoll, votePoll, closePoll, getConversationConfig, patchConversationConfig,
+};
+function idOf(item) { var _a, _b, _c; return (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.conversation_id) !== null && _b !== void 0 ? _b : item === null || item === void 0 ? void 0 : item.message_id) !== null && _c !== void 0 ? _c : item === null || item === void 0 ? void 0 : item.poll_id; }
+function mergeById(slice, item) { const id = idOf(item); return id == null ? slice : Object.assign(Object.assign({}, slice), { [id]: Object.assign(Object.assign({}, slice[id]), item) }); }
+function resultsOf(response) { return (response === null || response === void 0 ? void 0 : response.results) || []; }
+function clientRequestIdOf(message) { return message === null || message === void 0 ? void 0 : message.client_request_id; }
+/**
+ * dcm's DRF validation errors aren't always {detail}: ConversationAttachmentView
+ * translates a rejected upload into a field-keyed {"files": [...]} body (the
+ * MSG-2 chunk-4 fix — see django-core-micha messaging/views.py), while other
+ * endpoints use {detail}. Check every shape a caller might actually receive
+ * before falling back to the generic axios error message.
+ */
+export function extractApiErrorMessage(error) {
+    var _a;
+    const data = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data;
+    if (typeof (data === null || data === void 0 ? void 0 : data.detail) === 'string')
+        return data.detail;
+    if (typeof (data === null || data === void 0 ? void 0 : data.message) === 'string')
+        return data.message;
+    if (Array.isArray(data === null || data === void 0 ? void 0 : data.files))
+        return data.files.join(' ');
+    if (data && typeof data === 'object') {
+        const firstArray = Object.values(data).find((value) => Array.isArray(value) && value.length);
+        if (firstArray)
+            return firstArray.join(' ');
+    }
+    return error === null || error === void 0 ? void 0 : error.message;
+}
+function reconcileMessage(messages, message) {
+    var _a, _b;
+    const requestId = clientRequestIdOf(message);
+    const matchingEntry = requestId && Object.entries(messages).find(([, item]) => clientRequestIdOf(item) === requestId);
+    if (!matchingEntry)
+        return mergeById(messages, message);
+    const [previousKey, previous] = matchingEntry;
+    const next = Object.assign({}, messages);
+    delete next[previousKey];
+    const id = (_a = idOf(message)) !== null && _a !== void 0 ? _a : previousKey;
+    next[id] = Object.assign(Object.assign(Object.assign({}, previous), message), { id: (_b = idOf(message)) !== null && _b !== void 0 ? _b : previous.id, status: message.status || 'sent', error: null });
+    return next;
+}
+export function messagingReducer(state, action) {
+    var _a, _b, _c;
+    switch (action.type) {
+        case 'conversationsLoaded': {
+            const conversations = action.results.reduce((next, item) => mergeById(next, item), state.conversations);
+            return Object.assign(Object.assign({}, state), { conversations, cursors: Object.assign(Object.assign({}, state.cursors), { conversations: (_a = action.nextCursor) !== null && _a !== void 0 ? _a : null }) });
+        }
+        case 'unreadLoaded': return Object.assign(Object.assign({}, state), { unread: action.unread || EMPTY_CACHE.unread });
+        case 'messagesLoaded': {
+            const messages = action.results.reduce((next, item) => mergeById(next, item), state.messages);
+            return Object.assign(Object.assign({}, state), { messages, cursors: Object.assign(Object.assign({}, state.cursors), { messages: Object.assign(Object.assign({}, state.cursors.messages), { [action.conversationId]: (_b = action.nextCursor) !== null && _b !== void 0 ? _b : null }) }) });
+        }
+        case 'threadLoaded': {
+            const messages = action.results.reduce((next, item) => mergeById(next, item), state.messages);
+            return Object.assign(Object.assign({}, state), { messages, cursors: Object.assign(Object.assign({}, state.cursors), { threads: Object.assign(Object.assign({}, state.cursors.threads), { [action.rootId]: (_c = action.nextCursor) !== null && _c !== void 0 ? _c : null }) }) });
+        }
+        case 'conversationUpsert': return Object.assign(Object.assign({}, state), { conversations: mergeById(state.conversations, action.conversation) });
+        case 'messageOptimistic': return Object.assign(Object.assign({}, state), { messages: mergeById(state.messages, action.message) });
+        case 'messageReconciled': return Object.assign(Object.assign({}, state), { messages: reconcileMessage(state.messages, action.message) });
+        case 'messageFailed': {
+            const matching = Object.entries(state.messages).find(([, item]) => clientRequestIdOf(item) === action.clientRequestId);
+            if (!matching)
+                return state;
+            const [key, message] = matching;
+            return Object.assign(Object.assign({}, state), { messages: Object.assign(Object.assign({}, state.messages), { [key]: Object.assign(Object.assign({}, message), { status: 'error', error: action.error }) }) });
+        }
+        case 'messagePatched': return Object.assign(Object.assign({}, state), { messages: mergeById(state.messages, action.message) });
+        case 'frame': return applyFrame(state, action.frame);
+        default: return state;
+    }
+}
+export function applyFrame(state, frame) {
+    var _a, _b, _c;
+    const payload = frame.message || frame.conversation || frame.participant || frame;
+    const conversationId = (_a = frame.conversation_id) !== null && _a !== void 0 ? _a : payload.conversation_id;
+    if (frame.type === 'message') {
+        const message = Object.assign(Object.assign({}, payload), { conversation_id: conversationId });
+        return Object.assign(Object.assign({}, state), { messages: reconcileMessage(state.messages, message) });
+    }
+    if (frame.type === 'message_edited')
+        return Object.assign(Object.assign({}, state), { messages: mergeById(state.messages, payload) });
+    if (frame.type === 'reaction') {
+        const messageId = (_b = frame.message_id) !== null && _b !== void 0 ? _b : payload.message_id;
+        const previous = state.messages[messageId] || { id: messageId };
+        return Object.assign(Object.assign({}, state), { messages: mergeById(state.messages, Object.assign(Object.assign({}, previous), { reactions: payload.reactions || frame.reactions || previous.reactions || [] })) });
+    }
+    if (frame.type === 'poll_updated') {
+        const messageId = (_c = frame.message_id) !== null && _c !== void 0 ? _c : payload.message_id;
+        const previous = state.messages[messageId] || { id: messageId };
+        const poll = payload.poll || frame.poll || payload;
+        return Object.assign(Object.assign({}, state), { messages: mergeById(state.messages, Object.assign(Object.assign({}, previous), { poll })), polls: mergeById(state.polls, poll) });
+    }
+    if (frame.type === 'message_deleted') {
+        const previous = state.messages[frame.message_id] || {};
+        return Object.assign(Object.assign({}, state), { messages: Object.assign(Object.assign({}, state.messages), { [frame.message_id]: Object.assign(Object.assign({}, previous), { id: frame.message_id, deleted_at: frame.deleted_at, deleted_by: frame.deleted_by, body: null, title: null, link_target: null }) }) });
+    }
+    if (frame.type === 'conversation_upsert')
+        return Object.assign(Object.assign({}, state), { conversations: mergeById(state.conversations, payload) });
+    // conversation_archived/participant_changed: the design doc names these frame
+    // types but doesn't pin their exact payload shape. Treating them as merging
+    // onto the conversation record (participant-local fields folded flat, an
+    // `archived` flag set) is this chunk's best-effort reading, not a confirmed
+    // contract — re-verify against dcm's actual WS payload once available, per
+    // the WO's "shape fixtures from the design doc, not from imagination" caution.
+    if (frame.type === 'conversation_archived')
+        return Object.assign(Object.assign({}, state), { conversations: mergeById(state.conversations, Object.assign(Object.assign({}, payload), { id: conversationId, archived: true })) });
+    if (frame.type === 'participant_changed')
+        return Object.assign(Object.assign({}, state), { conversations: mergeById(state.conversations, Object.assign(Object.assign({}, payload), { id: conversationId })) });
+    return state;
+}
+export function MessagingProvider({ children, filters = {}, activeConversationId = null, api = DEFAULT_API, active = true }) {
+    const { subscribe, onReconnect } = useRealtime();
+    const { user } = useContext(AuthContext) || {};
+    const [cache, dispatch] = useReducer(messagingReducer, EMPTY_CACHE);
+    const activeIdRef = useRef(activeConversationId);
+    const seenEventsRef = useRef(new Set());
+    const filtersRef = useRef(filters);
+    activeIdRef.current = activeConversationId;
+    filtersRef.current = filters;
+    const refreshConversations = useCallback(async () => {
+        const response = await api.listConversations(filtersRef.current);
+        dispatch({ type: 'conversationsLoaded', results: resultsOf(response), nextCursor: response === null || response === void 0 ? void 0 : response.next_cursor });
+        return response;
+    }, [api]);
+    const refreshUnread = useCallback(async () => {
+        const unread = await api.getUnreadCount();
+        dispatch({ type: 'unreadLoaded', unread });
+        return unread;
+    }, [api]);
+    const refreshThread = useCallback(async (conversationId = activeIdRef.current, { cursor } = {}) => {
+        if (conversationId == null)
+            return null;
+        const response = await api.listMessages(conversationId, ...(cursor ? [{ cursor }] : []));
+        dispatch({ type: 'messagesLoaded', conversationId, results: resultsOf(response), nextCursor: response === null || response === void 0 ? void 0 : response.next_cursor });
+        return response;
+    }, [api]);
+    const loadMoreMessages = useCallback((conversationId = activeIdRef.current) => {
+        const cursor = cache.cursors.messages[conversationId];
+        return cursor ? refreshThread(conversationId, { cursor }) : Promise.resolve(null);
+    }, [cache.cursors.messages, refreshThread]);
+    const loadThreadReplies = useCallback(async (rootId, { cursor } = {}) => {
+        const response = await api.listThread(rootId, { cursor });
+        dispatch({ type: 'threadLoaded', rootId, results: resultsOf(response), nextCursor: response === null || response === void 0 ? void 0 : response.next_cursor });
+        return response;
+    }, [api]);
+    const getMessageReadStatus = useCallback((messageId) => api.getReadStatus(messageId), [api]);
+    const loadMoreConversations = useCallback(async () => {
+        const cursor = cache.cursors.conversations;
+        if (!cursor)
+            return null;
+        const response = await api.listConversations(Object.assign(Object.assign({}, filtersRef.current), { cursor }));
+        dispatch({ type: 'conversationsLoaded', results: resultsOf(response), nextCursor: response === null || response === void 0 ? void 0 : response.next_cursor });
+        return response;
+    }, [api, cache.cursors.conversations]);
+    const updateConversation = useCallback((conversation) => {
+        dispatch({ type: 'conversationUpsert', conversation });
+        return conversation;
+    }, []);
+    const setConversationArchived = useCallback(async (conversationId, archived) => {
+        var _a;
+        const conversation = await api.archiveConversation(conversationId, archived);
+        return updateConversation(Object.assign(Object.assign({}, conversation), { id: (_a = conversation === null || conversation === void 0 ? void 0 : conversation.id) !== null && _a !== void 0 ? _a : conversationId, archived: Boolean(archived) }));
+    }, [api, updateConversation]);
+    const setConversationPreferences = useCallback(async (conversationId, patch) => {
+        var _a;
+        const conversation = await api.patchConversationPreferences(conversationId, patch);
+        return updateConversation(Object.assign(Object.assign(Object.assign({}, conversation), { id: (_a = conversation === null || conversation === void 0 ? void 0 : conversation.id) !== null && _a !== void 0 ? _a : conversationId }), patch));
+    }, [api, updateConversation]);
+    const openGroupConversation = useCallback(async (payload) => {
+        const conversation = await api.createGroupConversation(payload);
+        return updateConversation(conversation);
+    }, [api, updateConversation]);
+    const openBroadcastConversation = useCallback(async (payload) => {
+        const conversation = await api.createBroadcastConversation(payload);
+        return updateConversation(conversation);
+    }, [api, updateConversation]);
+    const sendMessage = useCallback(async (conversationId, payload, { clientRequestId, retry = false } = {}) => {
+        var _a, _b;
+        const requestId = clientRequestId || payload.client_request_id;
+        const optimistic = Object.assign({ id: `local-${requestId}`, conversation_id: conversationId, kind: payload.kind || 'chat', body: payload.body || '', title: payload.title || null, link_target: payload.link_target || null, reply_to: payload.reply_to || null, client_request_id: requestId, created_at: new Date().toISOString(), status: 'pending', sender: user ? { id: user.id, display_name: user.display_name || user.username } : undefined }, (retry ? {} : {}));
+        if (!retry)
+            dispatch({ type: 'messageOptimistic', message: optimistic });
+        else
+            dispatch({ type: 'messageReconciled', message: Object.assign(Object.assign({}, optimistic), { status: 'pending', error: null }) });
+        try {
+            const message = await api.createMessage(conversationId, Object.assign(Object.assign({}, payload), { client_request_id: requestId }), { idempotencyKey: requestId });
+            dispatch({ type: 'messageReconciled', message: Object.assign(Object.assign({}, message), { conversation_id: (_a = message === null || message === void 0 ? void 0 : message.conversation_id) !== null && _a !== void 0 ? _a : conversationId, client_request_id: (_b = message === null || message === void 0 ? void 0 : message.client_request_id) !== null && _b !== void 0 ? _b : requestId }) });
+            return message;
+        }
+        catch (error) {
+            dispatch({ type: 'messageFailed', clientRequestId: requestId, error: extractApiErrorMessage(error) });
+            throw error;
+        }
+    }, [api, user]);
+    const sendAttachments = useCallback(async (conversationId, formData, { clientRequestId, optimisticMessage, retry = false } = {}) => {
+        var _a, _b;
+        const optimistic = {
+            id: `local-${clientRequestId}`, conversation_id: conversationId, kind: 'chat', body: (optimisticMessage === null || optimisticMessage === void 0 ? void 0 : optimisticMessage.body) || '',
+            reply_to: (optimisticMessage === null || optimisticMessage === void 0 ? void 0 : optimisticMessage.reply_to) || null, client_request_id: clientRequestId, created_at: new Date().toISOString(), status: 'pending',
+            sender: user ? { id: user.id, display_name: user.display_name || user.username } : undefined,
+            attachments: (optimisticMessage === null || optimisticMessage === void 0 ? void 0 : optimisticMessage.attachments) || [],
+        };
+        if (!retry)
+            dispatch({ type: 'messageOptimistic', message: optimistic });
+        else
+            dispatch({ type: 'messageReconciled', message: Object.assign(Object.assign({}, optimistic), { status: 'pending', error: null }) });
+        try {
+            const message = await api.uploadAttachments(conversationId, formData, { idempotencyKey: clientRequestId });
+            dispatch({ type: 'messageReconciled', message: Object.assign(Object.assign({}, message), { conversation_id: (_a = message === null || message === void 0 ? void 0 : message.conversation_id) !== null && _a !== void 0 ? _a : conversationId, client_request_id: (_b = message === null || message === void 0 ? void 0 : message.client_request_id) !== null && _b !== void 0 ? _b : clientRequestId }) });
+            return message;
+        }
+        catch (error) {
+            dispatch({ type: 'messageFailed', clientRequestId, error: extractApiErrorMessage(error) });
+            throw error;
+        }
+    }, [api, user]);
+    const patchMessage = useCallback((message) => dispatch({ type: 'messagePatched', message }), []);
+    const toggleReaction = useCallback(async (messageId, emoji, active) => {
+        var _a;
+        const message = cache.messages[messageId] || { id: messageId };
+        const reactions = message.reactions || [];
+        const current = reactions.find((reaction) => reaction.emoji === emoji);
+        const nextReactions = active
+            ? reactions.map((reaction) => reaction.emoji === emoji ? Object.assign(Object.assign({}, reaction), { reacted: false, count: Math.max(0, (reaction.count || 1) - 1) }) : reaction).filter((reaction) => reaction.count !== 0)
+            : current
+                ? reactions.map((reaction) => reaction.emoji === emoji ? Object.assign(Object.assign({}, reaction), { reacted: true, count: (reaction.count || 0) + 1 }) : reaction)
+                : [...reactions, { emoji, count: 1, reacted: true }];
+        patchMessage(Object.assign(Object.assign({}, message), { reactions: nextReactions }));
+        try {
+            const result = active ? await api.removeReaction(messageId, emoji) : await api.addReaction(messageId, emoji);
+            patchMessage(Object.assign(Object.assign(Object.assign({}, message), ((result === null || result === void 0 ? void 0 : result.message) || result)), { reactions: (result === null || result === void 0 ? void 0 : result.reactions) || ((_a = result === null || result === void 0 ? void 0 : result.message) === null || _a === void 0 ? void 0 : _a.reactions) || nextReactions }));
+            return result;
+        }
+        catch (error) {
+            patchMessage(message);
+            throw error;
+        }
+    }, [api, cache.messages, patchMessage]);
+    const createConversationPoll = useCallback(async (conversationId, payload, { clientRequestId } = {}) => {
+        var _a;
+        const poll = await api.createPoll(conversationId, Object.assign(Object.assign({}, payload), { client_request_id: clientRequestId }), { idempotencyKey: clientRequestId });
+        const message = (poll === null || poll === void 0 ? void 0 : poll.message) || poll;
+        if ((message === null || message === void 0 ? void 0 : message.id) != null)
+            patchMessage(Object.assign(Object.assign({}, message), { conversation_id: (_a = message.conversation_id) !== null && _a !== void 0 ? _a : conversationId, poll: message.poll || poll.poll || poll }));
+        return poll;
+    }, [api, patchMessage]);
+    const castPollVote = useCallback(async (messageId, poll, optionIds) => {
+        const result = await api.votePoll(poll.id, optionIds);
+        const nextPoll = Object.assign(Object.assign({}, poll), ((result === null || result === void 0 ? void 0 : result.poll) || result));
+        patchMessage(Object.assign(Object.assign({}, (cache.messages[messageId] || { id: messageId })), { poll: nextPoll }));
+        return result;
+    }, [api, cache.messages, patchMessage]);
+    const closeConversationPoll = useCallback(async (messageId, poll) => {
+        var _a;
+        const result = await api.closePoll(poll.id);
+        const nextPoll = Object.assign(Object.assign(Object.assign({}, poll), ((result === null || result === void 0 ? void 0 : result.poll) || result)), { closed_at: ((_a = result === null || result === void 0 ? void 0 : result.poll) === null || _a === void 0 ? void 0 : _a.closed_at) || (result === null || result === void 0 ? void 0 : result.closed_at) || new Date().toISOString() });
+        patchMessage(Object.assign(Object.assign({}, (cache.messages[messageId] || { id: messageId })), { poll: nextPoll }));
+        return result;
+    }, [api, cache.messages, patchMessage]);
+    const loadConversationConfig = useCallback((conversationId) => api.getConversationConfig(conversationId), [api]);
+    const saveConversationConfig = useCallback((conversationId, patch) => api.patchConversationConfig(conversationId, patch), [api]);
+    const refresh = useCallback(async () => Promise.all([refreshConversations(), refreshUnread(), refreshThread()]), [refreshConversations, refreshThread, refreshUnread]);
+    // `/api/messaging/` is authenticated-only (design §REST). Host apps mount
+    // MessagingProvider inside NotificationsProvider, which itself renders its
+    // children regardless of auth state — so without this gate a provider
+    // mounted before login completes fires three REST calls that spuriously
+    // 401. Defaults to true (matches chunk 1's existing tests/harness usage,
+    // which don't pass it); a host app gates it with `active={authenticated}`.
+    useEffect(() => { if (active)
+        refresh().catch(() => { }); }, [active, refresh]);
+    useEffect(() => subscribe(MESSAGING_ENVELOPE, (frame) => {
+        if (frame.event_id && seenEventsRef.current.has(frame.event_id))
+            return;
+        if (frame.event_id) {
+            seenEventsRef.current.add(frame.event_id);
+            if (seenEventsRef.current.size > 500)
+                seenEventsRef.current.delete(seenEventsRef.current.values().next().value);
+        }
+        dispatch({ type: 'frame', frame });
+    }), [subscribe]);
+    useEffect(() => {
+        if (!active || !onReconnect)
+            return undefined;
+        return onReconnect(() => { refresh().catch(() => { }); });
+    }, [active, onReconnect, refresh]);
+    const value = useMemo(() => ({
+        cache, refresh, refreshConversations, refreshUnread, refreshThread, loadMoreMessages, loadThreadReplies, getMessageReadStatus, loadMoreConversations,
+        setConversationArchived, setConversationPreferences, openGroupConversation,
+        openBroadcastConversation, sendMessage, sendAttachments, toggleReaction, createConversationPoll, castPollVote, closeConversationPoll,
+        loadConversationConfig, saveConversationConfig, currentUser: user, getAttachment: api.getAttachment,
+        getAttachmentThumbnail: api.getAttachmentThumbnail, activeConversationId,
+    }), [cache, refresh, refreshConversations, refreshUnread, refreshThread, loadMoreMessages, loadThreadReplies, getMessageReadStatus, loadMoreConversations,
+        setConversationArchived, setConversationPreferences, openGroupConversation,
+        openBroadcastConversation, sendMessage, sendAttachments, toggleReaction, createConversationPoll, castPollVote, closeConversationPoll,
+        loadConversationConfig, saveConversationConfig, user, api.getAttachment, api.getAttachmentThumbnail, activeConversationId]);
+    return _jsx(MessagingContext.Provider, { value: value, children: children });
+}
+export function useMessaging() {
+    const context = useContext(MessagingContext);
+    if (!context)
+        throw new Error('useMessaging must be used within a MessagingProvider');
+    return context;
+}

package/dist/messaging/MessagingScopeConfig.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, CircularProgress, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Stack, Switch, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+/** Provider-backed scope configuration surface; hosts choose its placement and capability gate. */
+export function MessagingScopeConfig({ conversationId }) {
+    const { t } = useTranslation();
+    const { loadConversationConfig, saveConversationConfig } = useMessaging();
+    const [config, setConfig] = useState(null);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    useEffect(() => { let live = true; loadConversationConfig(conversationId).then((value) => live && setConfig(value)).catch((loadError) => live && setError(t('MessagingConfig.LOAD_ERROR', { message: extractApiErrorMessage(loadError) }))); return () => { live = false; }; }, [conversationId, loadConversationConfig, t]);
+    const update = async (patch) => { setSaving(true); setError(null); try {
+        setConfig(await saveConversationConfig(conversationId, patch));
+    }
+    catch (saveError) {
+        setError(t('MessagingConfig.SAVE_ERROR', { message: extractApiErrorMessage(saveError) }));
+    }
+    finally {
+        setSaving(false);
+    } };
+    if (!config)
+        return error
+            ? _jsx(Alert, { severity: "error", role: "alert", children: error })
+            : _jsx(Box, { "aria-label": t('MessagingConfig.LOADING'), sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(CircularProgress, { size: 24 }) });
+    return _jsxs(Stack, { spacing: 1, "aria-label": t('MessagingConfig.LABEL'), children: [_jsx(Typography, { variant: "subtitle1", children: t('MessagingConfig.TITLE') }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), _jsxs(FormControl, { fullWidth: true, size: "small", disabled: saving, children: [_jsx(InputLabel, { children: t('MessagingConfig.DM_POLICY') }), _jsxs(Select, { label: t('MessagingConfig.DM_POLICY'), value: config.dm_policy || 'all', onChange: (event) => update({ dm_policy: event.target.value }), children: [_jsx(MenuItem, { value: "all", children: t('MessagingConfig.DM_ALL') }), _jsx(MenuItem, { value: "within_shared_groups", children: t('MessagingConfig.DM_SHARED') }), _jsx(MenuItem, { value: "team_only", children: t('MessagingConfig.DM_TEAM') })] })] }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(config.group_chat_enabled), disabled: saving, onChange: (event) => update({ group_chat_enabled: event.target.checked }) }), label: t('MessagingConfig.GROUP_ENABLED') }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(config.everyone_can_post), disabled: saving || !config.group_chat_enabled, onChange: (event) => update({ everyone_can_post: event.target.checked }) }), label: t('MessagingConfig.EVERYONE_POSTS') })] });
+}

package/dist/messaging/PollCard.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Checkbox, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+/** Independently mountable live poll view. Server authorization remains authoritative. */
+export function PollCard({ message, canClose: canCloseProp }) {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = useTranslation();
+    const { castPollVote, closeConversationPoll, currentUser } = useMessaging();
+    const poll = message === null || message === void 0 ? void 0 : message.poll;
+    const [selected, setSelected] = useState([]);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => setSelected(((poll === null || poll === void 0 ? void 0 : poll.options) || []).filter((option) => option.selected || option.voted).map((option) => option.id)), [poll]);
+    if (!poll)
+        return null;
+    const closed = Boolean(poll.closed_at);
+    const creatorId = (_b = (_a = poll.created_by) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : poll.created_by;
+    const canClose = (_f = (_d = (_c = canCloseProp !== null && canCloseProp !== void 0 ? canCloseProp : poll.can_close) !== null && _c !== void 0 ? _c : message === null || message === void 0 ? void 0 : message.can_close) !== null && _d !== void 0 ? _d : (_e = message === null || message === void 0 ? void 0 : message.permissions) === null || _e === void 0 ? void 0 : _e.can_close) !== null && _f !== void 0 ? _f : (creatorId != null && creatorId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id));
+    const changeSelection = (id) => setSelected((current) => poll.allow_multiple ? (current.includes(id) ? current.filter((value) => value !== id) : [...current, id]) : (current.includes(id) ? [] : [id]));
+    const vote = async () => {
+        if (!selected.length) {
+            setError(t('MessagingPoll.SELECT_OPTION'));
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            await castPollVote(message.id, poll, selected);
+        }
+        catch (voteError) {
+            setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) }));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const close = async () => {
+        setBusy(true);
+        setError(null);
+        try {
+            await closeConversationPoll(message.id, poll);
+        }
+        catch (closeError) {
+            setError(t('MessagingPoll.CLOSE_ERROR', { message: extractApiErrorMessage(closeError) }));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return _jsx(Paper, { variant: "outlined", sx: { p: 1 }, "aria-label": t('MessagingPoll.LABEL'), children: _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "subtitle2", children: poll.question }), (poll.options || []).map((option) => { var _a, _b; return _jsx(FormControlLabel, { disabled: closed || busy, control: _jsx(Checkbox, { checked: selected.includes(option.id), onChange: () => changeSelection(option.id) }), label: `${option.text || option.label} (${(_b = (_a = option.vote_count) !== null && _a !== void 0 ? _a : option.votes_count) !== null && _b !== void 0 ? _b : 0})` }, option.id); }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { size: "small", onClick: vote, disabled: closed || busy, children: t('MessagingPoll.VOTE') }), canClose && !closed && _jsx(Button, { size: "small", color: "warning", onClick: close, disabled: busy, children: t('MessagingPoll.CLOSE') }), closed && _jsx(Typography, { variant: "caption", children: t('MessagingPoll.CLOSED') })] })] }) });
+}

package/dist/messaging/ReactionBar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AddReactionOutlinedIcon from '@mui/icons-material/AddReactionOutlined';
+import { Alert, Chip, IconButton, Stack } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
+/** Independently mountable aggregate reaction controls for one message. */
+export function ReactionBar({ message }) {
+    const { t } = useTranslation();
+    const { toggleReaction } = useMessaging();
+    const [expanded, setExpanded] = useState(false);
+    const [error, setError] = useState(null);
+    // Tracks in-flight emoji toggles for this message so a rapid double-click
+    // can't fire two concurrent requests for the same emoji — toggleReaction's
+    // rollback-on-failure reverts to a pre-optimistic snapshot, which would
+    // silently discard a second, already-succeeded change if both were in
+    // flight at once. Disabling the chip while its own request is pending
+    // removes the race instead of trying to make concurrent toggles safe.
+    const [pending, setPending] = useState(() => new Set());
+    const reactions = (message === null || message === void 0 ? void 0 : message.reactions) || [];
+    const react = async (emoji, active = false) => {
+        if (pending.has(emoji))
+            return;
+        setError(null);
+        setPending((current) => new Set(current).add(emoji));
+        try {
+            await toggleReaction(message.id, emoji, active);
+        }
+        catch (reactionError) {
+            setError(t('MessagingReactions.ERROR', { message: extractApiErrorMessage(reactionError) }));
+        }
+        finally {
+            setPending((current) => { const next = new Set(current); next.delete(emoji); return next; });
+        }
+    };
+    return _jsxs(Stack, { spacing: 0.5, "aria-label": t('MessagingReactions.LABEL'), children: [_jsxs(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: [reactions.map((reaction) => _jsx(Chip, { size: "small", disabled: pending.has(reaction.emoji), color: reaction.reacted ? 'primary' : 'default', label: `${reaction.emoji} ${reaction.count || 0}`, onClick: () => react(reaction.emoji, Boolean(reaction.reacted)), "aria-label": t('MessagingReactions.TOGGLE', { emoji: reaction.emoji, count: reaction.count || 0 }) }, reaction.emoji)), _jsx(IconButton, { size: "small", "aria-label": t('MessagingReactions.ADD'), onClick: () => setExpanded((value) => !value), children: _jsx(AddReactionOutlinedIcon, { fontSize: "small" }) })] }), expanded && _jsx(Stack, { direction: "row", spacing: 0.25, flexWrap: "wrap", children: QUICK_EMOJIS.map((emoji) => {
+                    // A quick-emoji already reflected in the aggregate row must toggle it
+                    // off, not re-add it — otherwise clicking an already-reacted emoji here
+                    // optimistically double-increments the count before the API call.
+                    const existing = reactions.find((reaction) => reaction.emoji === emoji);
+                    return _jsx(Chip, { size: "small", disabled: pending.has(emoji), color: (existing === null || existing === void 0 ? void 0 : existing.reacted) ? 'primary' : 'default', label: emoji, onClick: () => { react(emoji, Boolean(existing === null || existing === void 0 ? void 0 : existing.reacted)); setExpanded(false); } }, emoji);
+                }) }), error && _jsx(Alert, { severity: "error", role: "alert", children: error })] });
+}

package/dist/messaging/ReadTicks.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMessaging } from './MessagingProvider';
+/** Renders only the aggregate receipt unless the server explicitly supplies permitted detail. */
+export function ReadTicks({ messageId, conversation }) {
+    const { t } = useTranslation();
+    const { getMessageReadStatus } = useMessaging();
+    const [status, setStatus] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        getMessageReadStatus(messageId).then((next) => { if (mounted)
+            setStatus(next); }).catch(() => { if (mounted)
+            setStatus(null); });
+        return () => { mounted = false; };
+    }, [getMessageReadStatus, messageId]);
+    if (!status)
+        return null;
+    const label = status.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: status.delivered_count || 0 });
+    // The server never returns DM detail; enforce the same carve-out defensively.
+    const detail = (conversation === null || conversation === void 0 ? void 0 : conversation.kind) === 'direct' ? null : status.recipient_detail;
+    const detailText = detail === null || detail === void 0 ? void 0 : detail.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean).join(', ');
+    return _jsx(Tooltip, { title: detailText || label, children: _jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", "aria-label": label, children: label }) });
+}

package/dist/messaging/Thread.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AuthContext } from '../auth/AuthContext';
+import { MessageBubble } from './MessageBubble';
+import { useMessaging } from './MessagingProvider';
+import { ReadTicks } from './ReadTicks';
+function chronological(messages) { return [...messages].sort((left, right) => new Date(left.created_at || 0) - new Date(right.created_at || 0)); }
+// A still-pending optimistic row (chunk 4) has a fake `local-<requestId>` id
+// and no durable server row yet — mounting ReadTicks against it would fire a
+// getMessageReadStatus REST call for an id the server has never heard of.
+// Wait for reconciliation (status !== 'pending') before showing read state.
+function canShowReadTicks(message, user) {
+    var _a;
+    return Boolean(user === null || user === void 0 ? void 0 : user.id) && ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.id) === user.id && message.status !== 'pending';
+}
+/**
+ * A standalone timeline. Compose/reaction/poll/attachment mutations remain
+ * separate chunk collaborators.
+ *
+ * ReadTicks is only mounted for the current user's own messages (matches
+ * jg's `shouldShowReadTick(msg, isOwn)`): a read receipt tells the sender
+ * whether their own message was seen, not the recipient anything about a
+ * message they're currently reading. Gating here also bounds the number of
+ * `getMessageReadStatus` REST calls a rendered timeline fires — one per own
+ * message shown, not one per message in the conversation.
+ */
+export function Thread({ conversationId, onReplyTargetChange }) {
+    var _a;
+    const { t } = useTranslation();
+    const { user } = useContext(AuthContext) || {};
+    const { cache, loadMoreMessages, loadThreadReplies } = useMessaging();
+    const scrollRef = useRef(null);
+    const [loadingOlder, setLoadingOlder] = useState(false);
+    const [error, setError] = useState(null);
+    const [replyingTo, setReplyingTo] = useState(null);
+    const [openThreads, setOpenThreads] = useState({});
+    const conversation = cache.conversations[conversationId];
+    const roots = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId && !message.reply_to)), [cache.messages, conversationId]);
+    const loadOlder = useCallback(async () => {
+        setLoadingOlder(true);
+        setError(null);
+        try {
+            await loadMoreMessages(conversationId);
+        }
+        catch (_a) {
+            setError(t('MessagingThread.LOAD_ERROR'));
+        }
+        finally {
+            setLoadingOlder(false);
+        }
+    }, [conversationId, loadMoreMessages, t]);
+    const onScroll = () => { var _a; if (((_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0 && cache.cursors.messages[conversationId] && !loadingOlder)
+        loadOlder(); };
+    const reply = (message) => { setReplyingTo(message); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(message); };
+    const toggleReplies = async (root) => {
+        if (!openThreads[root.id]) {
+            try {
+                await loadThreadReplies(root.id);
+            }
+            catch (_a) {
+                setError(t('MessagingThread.REPLIES_ERROR'));
+                return;
+            }
+        }
+        setOpenThreads((current) => (Object.assign(Object.assign({}, current), { [root.id]: !current[root.id] })));
+    };
+    return (_jsxs(Stack, { spacing: 1, sx: { minWidth: 0 }, children: [error && _jsx(Alert, { severity: "error", role: "alert", children: error }), replyingTo && _jsx(Alert, { severity: "info", onClose: () => { setReplyingTo(null); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null); }, children: t('MessagingThread.REPLYING_TO', { sender: ((_a = replyingTo.sender) === null || _a === void 0 ? void 0 : _a.display_name) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsxs(Box, { ref: scrollRef, onScroll: onScroll, sx: { maxHeight: 560, overflowY: 'auto', px: 0.5 }, "aria-label": t('MessagingThread.TIMELINE'), children: [cache.cursors.messages[conversationId] && _jsx(Box, { textAlign: "center", py: 1, children: _jsx(Button, { onClick: loadOlder, disabled: loadingOlder, children: loadingOlder ? _jsx(CircularProgress, { size: 18 }) : t('MessagingThread.LOAD_OLDER') }) }), !roots.length && _jsx(Typography, { color: "text.secondary", textAlign: "center", py: 4, children: t('MessagingThread.EMPTY') }), _jsx(Stack, { spacing: 1, children: roots.map((message) => {
+                            const replies = chronological(Object.values(cache.messages).filter((item) => item.reply_to === message.id));
+                            return _jsxs(Stack, { spacing: 0.75, children: [_jsx(MessageBubble, { message: message, onReply: reply, children: canShowReadTicks(message, user) && _jsx(ReadTicks, { messageId: message.id, conversation: conversation }) }), (message.reply_count || replies.length) > 0 && _jsx(Button, { size: "small", onClick: () => toggleReplies(message), children: openThreads[message.id] ? t('MessagingThread.HIDE_REPLIES') : t('MessagingThread.SHOW_REPLIES', { count: message.reply_count || replies.length }) }), openThreads[message.id] && _jsx(Stack, { spacing: 0.75, sx: { pl: 3, borderLeft: 2, borderColor: 'divider' }, children: replies.map((item) => _jsx(MessageBubble, { message: item, replyTo: message, onReply: reply, children: canShowReadTicks(item, user) && _jsx(ReadTicks, { messageId: item.id, conversation: conversation }) }, item.id)) }), _jsx(Divider, {})] }, message.id);
+                        }) })] })] }));
+}

package/dist/messaging/api.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import apiClient from '../auth/apiClient';
+const BASE_URL = '/api/messaging/';
+const conversationsUrl = `${BASE_URL}conversations/`;
+function data(response) {
+    return response.data;
+}
+function requestConfig({ cursor, params, headers } = {}) {
+    return Object.assign(Object.assign(Object.assign({}, (params ? { params } : {})), (cursor ? { params: Object.assign(Object.assign({}, (params || {})), { cursor }) } : {})), (headers ? { headers } : {}));
+}
+export function listConversations(_a = {}) {
+    var { cursor } = _a, filters = __rest(_a, ["cursor"]);
+    return apiClient.get(conversationsUrl, requestConfig({ cursor, params: filters })).then(data);
+}
+export function createDirectConversation(payload) { return apiClient.post(`${conversationsUrl}direct/`, payload).then(data); }
+export function createGroupConversation(payload) { return apiClient.post(`${conversationsUrl}group/`, payload).then(data); }
+export function createBroadcastConversation(payload) { return apiClient.post(`${conversationsUrl}broadcast/`, payload).then(data); }
+export function createManagedConversation(payload) { return apiClient.post(`${conversationsUrl}managed/`, payload).then(data); }
+export function createObjectThreadConversation(payload) { return apiClient.post(`${conversationsUrl}object-thread/`, payload).then(data); }
+export function getConversationConfig(conversationId) { return apiClient.get(`${conversationsUrl}${conversationId}/config/`).then(data); }
+export function patchConversationConfig(conversationId, patch) { return apiClient.patch(`${conversationsUrl}${conversationId}/config/`, patch).then(data); }
+export function archiveConversation(conversationId, archived) { return apiClient.post(`${conversationsUrl}${conversationId}/archive/`, { archived }).then(data); }
+export function patchConversationPreferences(conversationId, patch) { return apiClient.post(`${conversationsUrl}${conversationId}/preferences/`, patch).then(data); }
+export function listMessages(conversationId, { cursor } = {}) { return apiClient.get(`${conversationsUrl}${conversationId}/messages/`, requestConfig({ cursor })).then(data); }
+export function createMessage(conversationId, payload, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/messages/`, payload, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
+export function uploadAttachments(conversationId, formData, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/attachments/`, formData, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
+export function createPoll(conversationId, payload, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/polls/`, payload, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
+export function getMessage(messageId) { return apiClient.get(`${BASE_URL}messages/${messageId}/`).then(data); }
+export function patchMessage(messageId, patch) { return apiClient.patch(`${BASE_URL}messages/${messageId}/`, patch).then(data); }
+export function deleteMessage(messageId) { return apiClient.delete(`${BASE_URL}messages/${messageId}/`).then(data); }
+export function addReaction(messageId, emoji) { return apiClient.post(`${BASE_URL}messages/${messageId}/reactions/`, { emoji }).then(data); }
+export function removeReaction(messageId, emoji) { return apiClient.delete(`${BASE_URL}messages/${messageId}/reactions/${encodeURIComponent(emoji)}/`).then(data); }
+export function listThread(rootId, { cursor } = {}) { return apiClient.get(`${BASE_URL}messages/${rootId}/thread/`, requestConfig({ cursor })).then(data); }
+export function markThreadRead(rootId, readAt) { return apiClient.post(`${BASE_URL}messages/${rootId}/thread/read/`, readAt ? { read_at: readAt } : {}).then(data); }
+export function markConversationRead(conversationId, readAt) { return apiClient.post(`${conversationsUrl}${conversationId}/read/`, readAt ? { read_at: readAt } : {}).then(data); }
+export function getReadStatus(messageId) { return apiClient.get(`${BASE_URL}messages/${messageId}/read-status/`).then(data); }
+export function votePoll(pollId, optionIds) { return apiClient.post(`${BASE_URL}polls/${pollId}/vote/`, { option_ids: optionIds }).then(data); }
+export function closePoll(pollId) { return apiClient.post(`${BASE_URL}polls/${pollId}/close/`).then(data); }
+export function getAttachment(attachmentId) { return apiClient.get(`${BASE_URL}attachments/${attachmentId}/`, { responseType: 'blob' }).then(data); }
+export function getAttachmentThumbnail(attachmentId) { return apiClient.get(`${BASE_URL}attachments/${attachmentId}/thumbnail/`, { responseType: 'blob' }).then(data); }
+export function getUnreadCount() { return apiClient.get(`${BASE_URL}unread-count/`).then(data); }

package/dist/notifications/NotificationsProvider.js

@@ -66,7 +66,7 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     // `replaceNotifications(...)` is unconditional and would silently drop a message that
     // arrived and patched state before the initial REST response landed.
     const [seeded, setSeeded] = useState(false);
-    const { subscribe } = useRealtimeCore({
+    const { subscribe, onReconnect } = useRealtimeCore({
         active: authenticated && seeded,
         wsUrl: getWebSocketUrl(wsUrlBase),
     });
@@ -159,7 +159,7 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     const markSeen = useCallback((ids) => mark('seen', ids), [mark]);
     const markDismissed = useCallback((ids) => mark('dismissed', ids), [mark]);
     const markDone = useCallback((ids) => mark('done', ids), [mark]);
-    return (_jsx(RealtimeContext.Provider, { value: { subscribe }, children: _jsx(NotificationsContext.Provider, { value: {
+    return (_jsx(RealtimeContext.Provider, { value: { subscribe, onReconnect }, children: _jsx(NotificationsContext.Provider, { value: {
                 notifications,
                 unreadCount,
                 markSeen,