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

package/dist/messaging/MessagingProvider.js

@@ -1,16 +1,18 @@
 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 { archiveConversation, createBroadcastConversation, createDirectConversation, createGroupConversation, getReadStatus, getUnreadCount, listConversations, listMessages, listThread, patchConversationPreferences, markConversationRead, markThreadRead, createMessage, uploadAttachments, getAttachment, getAttachmentThumbnail, addReaction, removeReaction, createPoll, votePoll, closePoll, getConversationConfig, patchConversationConfig, patchMessage as patchMessageRequest, deleteMessage as deleteMessageRequest, } 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,
+    patchConversationPreferences, createGroupConversation, createBroadcastConversation, createDirectConversation,
+    markConversationRead, markThreadRead,
     createMessage, uploadAttachments, getAttachment, getAttachmentThumbnail,
     addReaction, removeReaction, createPoll, votePoll, closePoll, getConversationConfig, patchConversationConfig,
+    patchMessage: patchMessageRequest, deleteMessage: deleteMessageRequest,
 };
 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) }); }
@@ -53,7 +55,7 @@ function reconcileMessage(messages, message) {
     return next;
 }
 export function messagingReducer(state, action) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     switch (action.type) {
         case 'conversationsLoaded': {
             const conversations = action.results.reduce((next, item) => mergeById(next, item), state.conversations);
@@ -79,27 +81,40 @@ export function messagingReducer(state, action) {
             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);
+        case 'conversationRead': {
+            const previousCount = ((_e = (_d = state.unread) === null || _d === void 0 ? void 0 : _d.by_conversation) === null || _e === void 0 ? void 0 : _e[action.conversationId]) || 0;
+            if (!previousCount)
+                return state;
+            return Object.assign(Object.assign({}, state), { unread: Object.assign(Object.assign({}, state.unread), { unread_count: Math.max(0, (((_f = state.unread) === null || _f === void 0 ? void 0 : _f.unread_count) || 0) - previousCount), by_conversation: Object.assign(Object.assign({}, state.unread.by_conversation), { [action.conversationId]: 0 }) }) });
+        }
+        case 'frame': return applyFrame(state, action.frame, action.activeConversationId);
         default: return state;
     }
 }
-export function applyFrame(state, frame) {
-    var _a, _b, _c;
+export function applyFrame(state, frame, activeConversationId = null) {
+    var _a, _b, _c, _d;
     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) });
+        const requestId = clientRequestIdOf(message);
+        const reconcilesOptimisticMessage = Boolean(requestId && Object.values(state.messages).some((item) => clientRequestIdOf(item) === requestId));
+        const messages = reconcileMessage(state.messages, message);
+        if (conversationId == null || String(conversationId) === String(activeConversationId) || reconcilesOptimisticMessage)
+            return Object.assign(Object.assign({}, state), { messages });
+        const unread = state.unread || EMPTY_CACHE.unread;
+        const previousCount = ((_b = unread.by_conversation) === null || _b === void 0 ? void 0 : _b[conversationId]) || 0;
+        return Object.assign(Object.assign({}, state), { messages, unread: Object.assign(Object.assign({}, unread), { unread_count: (unread.unread_count || 0) + 1, by_conversation: Object.assign(Object.assign({}, unread.by_conversation), { [conversationId]: previousCount + 1 }) }) });
     }
     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 messageId = (_c = frame.message_id) !== null && _c !== void 0 ? _c : 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 messageId = (_d = frame.message_id) !== null && _d !== void 0 ? _d : 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) });
@@ -180,6 +195,12 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
         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 markConversationAsRead = useCallback(async (conversationId, readAt) => {
+        const result = await api.markConversationRead(conversationId, readAt);
+        dispatch({ type: 'conversationRead', conversationId });
+        return result;
+    }, [api]);
+    const markReplyThreadRead = useCallback((rootId, readAt) => api.markThreadRead(rootId, readAt), [api]);
     const openGroupConversation = useCallback(async (payload) => {
         const conversation = await api.createGroupConversation(payload);
         return updateConversation(conversation);
@@ -188,6 +209,10 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
         const conversation = await api.createBroadcastConversation(payload);
         return updateConversation(conversation);
     }, [api, updateConversation]);
+    const openDirectConversation = useCallback(async (payload) => {
+        const conversation = await api.createDirectConversation(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;
@@ -206,7 +231,7 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
             throw error;
         }
     }, [api, user]);
-    const sendAttachments = useCallback(async (conversationId, formData, { clientRequestId, optimisticMessage, retry = false } = {}) => {
+    const sendAttachments = useCallback(async (conversationId, formData, { clientRequestId, optimisticMessage, retry = false, onUploadProgress } = {}) => {
         var _a, _b;
         const optimistic = {
             id: `local-${clientRequestId}`, conversation_id: conversationId, kind: 'chat', body: (optimisticMessage === null || optimisticMessage === void 0 ? void 0 : optimisticMessage.body) || '',
@@ -219,7 +244,7 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
         else
             dispatch({ type: 'messageReconciled', message: Object.assign(Object.assign({}, optimistic), { status: 'pending', error: null }) });
         try {
-            const message = await api.uploadAttachments(conversationId, formData, { idempotencyKey: clientRequestId });
+            const message = await api.uploadAttachments(conversationId, formData, { idempotencyKey: clientRequestId, onUploadProgress });
             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;
         }
@@ -229,6 +254,23 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
         }
     }, [api, user]);
     const patchMessage = useCallback((message) => dispatch({ type: 'messagePatched', message }), []);
+    // Keep this API-backed action deliberately distinct from the cache-merge
+    // helper above. The server remains the authority for author/moderator rights.
+    const editMessage = useCallback(async (messageId, patch) => {
+        var _a;
+        const result = await api.patchMessage(messageId, patch);
+        const message = (result === null || result === void 0 ? void 0 : result.message) || result;
+        patchMessage(Object.assign(Object.assign(Object.assign({}, (cache.messages[messageId] || { id: messageId })), (message || {})), { id: (_a = message === null || message === void 0 ? void 0 : message.id) !== null && _a !== void 0 ? _a : messageId }));
+        return result;
+    }, [api, cache.messages, patchMessage]);
+    const removeMessage = useCallback(async (messageId) => {
+        var _a, _b, _c, _d, _e;
+        const result = await api.deleteMessage(messageId);
+        const message = (result === null || result === void 0 ? void 0 : result.message) || result;
+        const previous = cache.messages[messageId] || { id: messageId };
+        patchMessage(Object.assign(Object.assign(Object.assign({}, previous), (message || {})), { id: (_a = message === null || message === void 0 ? void 0 : message.id) !== null && _a !== void 0 ? _a : messageId, deleted_at: (_c = (_b = message === null || message === void 0 ? void 0 : message.deleted_at) !== null && _b !== void 0 ? _b : previous.deleted_at) !== null && _c !== void 0 ? _c : new Date().toISOString(), deleted_by: (_e = (_d = message === null || message === void 0 ? void 0 : message.deleted_by) !== null && _d !== void 0 ? _d : previous.deleted_by) !== null && _e !== void 0 ? _e : user === null || user === void 0 ? void 0 : user.id, body: null, title: null, link_target: null }));
+        return result;
+    }, [api, cache.messages, patchMessage, user]);
     const toggleReaction = useCallback(async (messageId, emoji, active) => {
         var _a;
         const message = cache.messages[messageId] || { id: messageId };
@@ -290,7 +332,7 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
             if (seenEventsRef.current.size > 500)
                 seenEventsRef.current.delete(seenEventsRef.current.values().next().value);
         }
-        dispatch({ type: 'frame', frame });
+        dispatch({ type: 'frame', frame, activeConversationId: activeIdRef.current });
     }), [subscribe]);
     useEffect(() => {
         if (!active || !onReconnect)
@@ -300,18 +342,22 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     const value = useMemo(() => ({
         cache, refresh, refreshConversations, refreshUnread, refreshThread, loadMoreMessages, loadThreadReplies, getMessageReadStatus, loadMoreConversations,
         setConversationArchived, setConversationPreferences, openGroupConversation,
-        openBroadcastConversation, sendMessage, sendAttachments, toggleReaction, createConversationPoll, castPollVote, closeConversationPoll,
+        markConversationRead: markConversationAsRead, markThreadRead: markReplyThreadRead,
+        openBroadcastConversation, openDirectConversation, sendMessage, sendAttachments, editMessage, removeMessage, 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,
+        setConversationArchived, setConversationPreferences, openGroupConversation, markConversationAsRead, markReplyThreadRead,
+        openBroadcastConversation, openDirectConversation, sendMessage, sendAttachments, editMessage, removeMessage, 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);
+    const context = useOptionalMessaging();
     if (!context)
         throw new Error('useMessaging must be used within a MessagingProvider');
     return context;
 }
+export function useOptionalMessaging() {
+    return useContext(MessagingContext);
+}

package/dist/messaging/ReactionBar.js

@@ -4,7 +4,7 @@ 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 = ['👍', '❤️', '😂', '🎉', '👀'];
+export const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
 /** Independently mountable aggregate reaction controls for one message. */
 export function ReactionBar({ message }) {
     const { t } = useTranslation();

package/dist/messaging/ReadTicks.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tooltip, Typography } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMessaging } from './MessagingProvider';
@@ -8,6 +8,7 @@ export function ReadTicks({ messageId, conversation }) {
     const { t } = useTranslation();
     const { getMessageReadStatus } = useMessaging();
     const [status, setStatus] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
     useEffect(() => {
         let mounted = true;
         getMessageReadStatus(messageId).then((next) => { if (mounted)
@@ -20,6 +21,8 @@ export function ReadTicks({ messageId, conversation }) {
     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 }) });
+    const recipients = (detail === null || detail === void 0 ? void 0 : detail.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean)) || [];
+    if (!recipients.length)
+        return _jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", "aria-label": label, children: label });
+    return _jsxs(_Fragment, { children: [_jsx(ButtonBase, { "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": Boolean(anchorEl), onClick: (event) => setAnchorEl(event.currentTarget), sx: { typography: 'caption', color: 'text.secondary', textDecoration: 'underline' }, children: label }), _jsx(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), children: _jsx(List, { "aria-label": t('MessagingReadTicks.RECIPIENTS'), children: recipients.map((recipient) => _jsx(ListItem, { children: recipient }, recipient)) }) })] });
 }

package/dist/messaging/Thread.js

@@ -1,12 +1,13 @@
 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 { useCallback, useContext, useEffect, 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)); }
+function replyToId(message) { var _a; return (_a = message.reply_to_id) !== null && _a !== void 0 ? _a : message.reply_to; }
 // 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.
@@ -26,18 +27,42 @@ function canShowReadTicks(message, user) {
  * `getMessageReadStatus` REST calls a rendered timeline fires — one per own
  * message shown, not one per message in the conversation.
  */
-export function Thread({ conversationId, onReplyTargetChange }) {
+export function Thread({ conversationId, onReplyTargetChange, canModerateMessages = false, onAnnouncementLink }) {
     var _a;
     const { t } = useTranslation();
     const { user } = useContext(AuthContext) || {};
-    const { cache, loadMoreMessages, loadThreadReplies } = useMessaging();
+    const { cache, loadMoreMessages, loadThreadReplies, markConversationRead, markThreadRead } = useMessaging();
     const scrollRef = useRef(null);
+    const wasNearBottomRef = useRef(true);
+    const messageCountRef = useRef(0);
     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 conversationMessages = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId)), [cache.messages, conversationId]);
+    const roots = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId && !replyToId(message))), [cache.messages, conversationId]);
+    useEffect(() => { if (conversationId != null)
+        markConversationRead(conversationId).catch(() => { }); }, [conversationId, markConversationRead]);
+    useEffect(() => { wasNearBottomRef.current = true; messageCountRef.current = 0; }, [conversationId]);
+    useEffect(() => {
+        var _a;
+        if (replyingTo && ((_a = cache.messages[replyingTo.id]) === null || _a === void 0 ? void 0 : _a.deleted_at)) {
+            setReplyingTo(null);
+            onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null);
+        }
+    }, [cache.messages, onReplyTargetChange, replyingTo]);
+    useEffect(() => {
+        const isNewMessage = conversationMessages.length > messageCountRef.current;
+        messageCountRef.current = conversationMessages.length;
+        if (!isNewMessage || !wasNearBottomRef.current || !scrollRef.current)
+            return;
+        const timeline = scrollRef.current;
+        if (typeof timeline.scrollTo === 'function')
+            timeline.scrollTo({ top: timeline.scrollHeight, behavior: 'smooth' });
+        else
+            timeline.scrollTop = timeline.scrollHeight;
+    }, [conversationMessages]);
     const loadOlder = useCallback(async () => {
         setLoadingOlder(true);
         setError(null);
@@ -51,9 +76,20 @@ export function Thread({ conversationId, onReplyTargetChange }) {
             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 onScroll = () => {
+        const timeline = scrollRef.current;
+        if (timeline)
+            wasNearBottomRef.current = timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight < 80;
+        if ((timeline === null || timeline === void 0 ? void 0 : timeline.scrollTop) === 0 && cache.cursors.messages[conversationId] && !loadingOlder)
+            loadOlder();
+    };
     const reply = (message) => { setReplyingTo(message); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(message); };
+    const jumpToMessage = (messageId) => {
+        var _a, _b;
+        const target = [...(((_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-message-id]')) || [])]
+            .find((element) => String(element.dataset.messageId) === String(messageId));
+        (_b = target === null || target === void 0 ? void 0 : target.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(target, { block: 'center', behavior: 'smooth' });
+    };
     const toggleReplies = async (root) => {
         if (!openThreads[root.id]) {
             try {
@@ -63,11 +99,12 @@ export function Thread({ conversationId, onReplyTargetChange }) {
                 setError(t('MessagingThread.REPLIES_ERROR'));
                 return;
             }
+            markThreadRead(root.id).catch(() => { });
         }
         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);
+                            const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
+                            return _jsxs(Stack, { spacing: 0.75, children: [_jsx(MessageBubble, { message: message, conversation: conversation, onReply: reply, onJumpToMessage: jumpToMessage, onAnnouncementLink: onAnnouncementLink, canModerateMessages: canModerateMessages, 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, conversation: conversation, onReply: reply, onJumpToMessage: jumpToMessage, onAnnouncementLink: onAnnouncementLink, canModerateMessages: canModerateMessages, children: canShowReadTicks(item, user) && _jsx(ReadTicks, { messageId: item.id, conversation: conversation }) }, item.id)) }), _jsx(Divider, {})] }, message.id);
                         }) })] })] }));
 }

package/dist/messaging/api.js

@@ -15,8 +15,8 @@ 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 } : {}));
+function requestConfig({ cursor, params, headers, onUploadProgress } = {}) {
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, (params ? { params } : {})), (cursor ? { params: Object.assign(Object.assign({}, (params || {})), { cursor }) } : {})), (headers ? { headers } : {})), (onUploadProgress ? { onUploadProgress } : {}));
 }
 export function listConversations(_a = {}) {
     var { cursor } = _a, filters = __rest(_a, ["cursor"]);
@@ -33,7 +33,7 @@ export function archiveConversation(conversationId, archived) { return apiClient
 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 uploadAttachments(conversationId, formData, { idempotencyKey, onUploadProgress } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/attachments/`, formData, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined, onUploadProgress })).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); }

package/dist/messaging/composerImageCompression.js

@@ -0,0 +1,36 @@
+const MAX_IMAGE_BYTES = 2 * 1024 * 1024;
+const MAX_IMAGE_EDGE = 2560;
+function imageDimensions(file) {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file);
+        const image = new Image();
+        image.onload = () => { URL.revokeObjectURL(url); resolve(image); };
+        image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Unable to decode image')); };
+        image.src = url;
+    });
+}
+function canvasBlob(canvas) {
+    return new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+}
+/** Compresses large images opportunistically; callers always receive a sendable file. */
+export async function compressImageForUpload(file) {
+    var _a, _b;
+    if (!((_a = file === null || file === void 0 ? void 0 : file.type) === null || _a === void 0 ? void 0 : _a.startsWith('image/')) || file.size <= MAX_IMAGE_BYTES)
+        return file;
+    try {
+        const image = await imageDimensions(file);
+        const largestEdge = Math.max(image.naturalWidth || image.width, image.naturalHeight || image.height);
+        if (!largestEdge || largestEdge <= MAX_IMAGE_EDGE)
+            return file;
+        const scale = MAX_IMAGE_EDGE / largestEdge;
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round((image.naturalWidth || image.width) * scale);
+        canvas.height = Math.round((image.naturalHeight || image.height) * scale);
+        (_b = canvas.getContext('2d')) === null || _b === void 0 ? void 0 : _b.drawImage(image, 0, 0, canvas.width, canvas.height);
+        const blob = await canvasBlob(canvas);
+        return blob ? new File([blob], file.name.replace(/\.[^.]+$/, '') + '.jpg', { type: 'image/jpeg', lastModified: file.lastModified }) : file;
+    }
+    catch (_c) {
+        return file;
+    }
+}

package/docs/messaging-deviations.md

@@ -1,36 +1,101 @@
-# Messaging deviations from jg
+# Messaging parity outcomes (MSG-3b)
 
-## Chunk 5 — reactions, polls and scope configuration
+This is the authoritative MSG-3b parity record. It replaces the former
+file-level “final parity confirmation,” which was not sufficient evidence of
+feature parity. Each entry maps directly to the numbered checklist in Part A
+of `work-orders/MSG-3b.md`. `OK` means the capability is present; `DEV` means
+an intentional, documented redesign or non-parity; `BLOCKED` means dcm 2.36.1
+does not expose the data or realtime contract needed to implement it truthfully.
 
-- Reactions use a compact set of common emoji choices plus the aggregate chips, rather than jg's full third-party emoji palette. Adding and toggling every reaction remains available through the same REST mutations; the shared package avoids a new picker dependency.
-- Poll creation is a Composer dialog instead of jg's Thread-coupled dialog. It retains question, two-or-more options and multiple-choice selection, while keeping composition independently mountable.
-- Poll results are rendered inline as an accessible option list with live aggregate counts. Closing is only offered when the serialized creator/capability allows it; a server-side 403 remains visible as a validation error.
-- Scope messaging configuration is an independently mountable component addressed by conversation id, rather than jg's event-id-specific settings panel. The host supplies placement and capability gating; it retains dm policy, group-chat enablement and everyone-can-post controls.
-- **Announcement composing (jg's `AnnouncementDialog.jsx`) was missing from the first chunk-5 pass — flagged by independent review and corrected before commit, not silently accepted as a gap.** `Composer` now offers an announcement mode (title + body + a host-supplied `link_target`) behind an `allowAnnouncement` prop, since whether to offer it at all is a host/capability decision the client cannot make on its own; only the target-link *value* is host-specific navigation context ucm cannot compute (jg pre-fills it from the currently open event-info section — same reasoning as `linkTarget`'s framing here). Uses the same `sendMessage`/`kind` plumbing chunk 1 already built, with `kind: 'announcement'`.
+## Unread lifecycle
 
-## Final parity confirmation
+1. **OK** — Selecting a conversation calls the existing mark-read endpoint and clears its local unread count.
+2. **OK** — Opening a `Thread` also marks its conversation read; the duplicate call is idempotent.
+3. **OK** — Marking a conversation read decrements the global count by that conversation’s prior unread value, clamped at zero.
+4. **OK** — Expanding a reply thread calls the existing thread-read endpoint for its root message.
+5. **OK** — Realtime incoming messages increment unread only outside the active conversation and never double-count optimistic-send reconciliation.
 
-- The provider/cache, conversation list and launchers, timeline/replies/read ticks, composer/attachments/announcements, reactions, polls and scope configuration are all represented by exported ucm surfaces. Host routing and scope selection remain host responsibilities by design.
-- The known broadcast-list pre-open unread/preview gap is retained as the accepted Chunk 2 deviation.
-- Every jg messaging file named in the work order's parity inventory (`Thread.jsx`, `ConversationList.jsx`, `MessagingContext.jsx`, `AnnouncementDialog.jsx`, `MessagingConfig.jsx`, `NewDirectMessageDialog.jsx` — unblocked by MSG-2b, `messagingApi.js`, `EmojiPickerButton.jsx`, `conversationHelpers.js`, `MessagesPage.jsx`'s launcher behavior) is represented by an exported ucm surface or an explicitly named deviation above — this line was corrected during chunk 5's independent review, which is exactly the check it exists to catch.
+## Message actions
 
-## Chunk 4 — composer and attachments
+6. **DEV** — Desktop hover and right-click open the MUI action menu. jg’s dedicated mobile long-press gesture is not reproduced; the same actions remain available through the regular MUI affordance.
+7. **OK** — Authors can edit their own messages inline. Moderator edit affordance is host-supplied because dcm exposes no per-viewer capability field; server authorization remains authoritative.
+8. **OK** — An active editor closes when the message is deleted by another update.
+9. **OK** — Authors and host-designated moderators can delete; the host boolean is UX gating only and dcm enforces the actual permission.
+10. **OK** — Deletion is confirmed in a MUI dialog before the request is sent.
+11. **OK** — A deleted reply/edit target clears dependent composer or editor state.
+12. **OK** — Message text can be copied through the action menu.
+13. **OK** — Reply targeting is present.
+14. **DEV** — Reactions use five compact presets rather than jg’s six-preset presentation.
+15. **DEV** — No full third-party emoji picker is added; the compact preset menu keeps the package dependency-free.
+16. **OK** — Deleted and poll messages do not render the generic action menu.
 
-- The composer is an independently mountable provider collaborator and accepts the timeline's reply target as a small placement prop, instead of being coupled into jg's monolithic `Thread`. It preserves reply selection and clears that selection after a successful send.
-- Attachment previews are compact authenticated thumbnail fetches with explicit download actions rather than jg's gallery/lightbox. Preview and download retain viewer-gated byte access; the licensed interaction redesign avoids a second media-viewer state machine in this shared surface.
+## Direct conversations
 
-## Chunk 3 — timeline, replies and receipts
+17. **OK** — `DirectMessageLauncher` starts a direct conversation.
+18. **OK** — The launcher displays the host-supplied candidate list and selection state.
+19. **OK** — It has distinct empty and in-flight creation states; candidate discovery remains host-owned because dcm has no directory endpoint.
+20. **OK** — Start is disabled until a candidate is selected and during creation.
+21. **OK** — Policy rejections render an API-derived readable error in the dialog.
+22. **OK** — The picker uses a fullscreen MUI dialog at the small breakpoint.
 
-- The timeline is split into `Thread`, `MessageBubble` and `ReadTicks`, with a simple expandable reply view rather than jg's coupled full-screen/thread-pane state. This preserves one-level reply viewing while allowing each surface to mount independently.
-- Reply selection is exposed through `onReplyTargetChange` rather than embedding a temporary composer. The next Composer surface consumes that context, avoiding a second compose state machine.
-- Older history automatically loads when the timeline reaches the top and also provides an explicit accessible button. Both use the server-issued opaque cursor; jg's timeline interaction is redesigned, not removed.
-- This chunk intentionally leaves reactions, polls and attachments as non-interactive count/type chips. Their existing jg capabilities are scheduled for chunks 4/5, rather than reproduced as disposable interaction implementations here.
-- Read ticks reproduce jg's `shouldShowReadTick(msg, isOwn)` semantics exactly: a `ReadTicks` collaborator is only mounted for the current user's own messages, matching jg's meaning of a read receipt (whether the sender's own message was seen) and bounding the number of `getMessageReadStatus` REST calls a rendered timeline fires to one per own message shown, not one per message in the conversation.
+## Threading and quoting
 
-## Chunk 2 — conversation list and launchers
+23. **OK** — Both dcm’s `reply_to_id` and optimistic rows’ `reply_to` are read, so REST and realtime replies group under their root.
+24. **OK** — Replies show a sender and short quoted snippet.
+25. **OK** — Clicking a quote scrolls its source message into view.
+26. **OK** — Quotes of deleted messages render the deleted placeholder rather than stale content.
+27. **BLOCKED** — dcm writes a thread receipt but exposes no prior thread receipt state, unread flag, or unread count to read. A truthful cross-device unread-reply dot cannot be rendered without a dcm contract addition.
+28. **OK** — Reply threads load lazily on expand and collapse locally.
+29. **DEV** — Reply composition is supplied through the independently mountable `Composer` target prop rather than jg’s per-thread embedded composer.
 
-- The list is a standalone, provider-backed component rather than receiving a conversation array and selection state from a page. This removes the page-owned messaging state machine while preserving selection through the host's `onOpen` placement callback.
-- Launchable group metadata is an explicit host-supplied `groupLaunchers` input, rather than jg's event-specific `listGroupsAvailable` request. The published dcm REST contract has no generic group-discovery endpoint; apps own scope pickers while ucm owns opening and surfacing the conversation.
-- Broadcast opening is exposed as `broadcastLauncher` plus `autoOpenBroadcast`, rather than inspecting jg's `?tab=broadcast` query itself. Routing/query parsing stays host-app scope; auto-*open* is reproduced once the host maps its route to that boolean.
-  - **Accepted deviation, not full parity:** jg's `MessagesPage.jsx` unconditionally fetches the broadcast conversation on every event load and pins it, with live unread count and message preview, at the top of the same recency-sorted unified list. ucm instead renders a static launcher button (no unread badge, no preview) until it is opened for the first time, at which point it becomes a normal list row with real unread/preview state and the launcher hides itself. Before that first open, a host relying on the broadcast conversation's unread state being visible without a click does not get it from ucm.
-- The layout and actions are redesigned as a compact MUI list with per-conversation overflow actions and explicit cursor “Load more,” replacing jg's page sidebar composition. Features retained here are unread indication, opening conversations, unopened-group launches, broadcast launch (see above for the surfacing gap), mute and archive. Per-kind row icon (group/broadcast/DM) is reproduced (jg's `getConversationAvatar`), using generic MUI icons rather than jg's per-kind avatar treatment (incl. the DM partner's actual `UserAvatar`) — the identification capability is kept, the specific visual is redesigned.
+## Composer
+
+30. **OK** — Enter sends and Shift+Enter preserves a newline.
+31. **OK** — Staged files show image thumbnails or file labels, with independent removal.
+32. **OK** — Attachment uploads show real byte-percentage progress when the browser reports an upload total; otherwise an indeterminate indicator is shown while the upload is in flight.
+33. **OK** — Images over 2 MB are compressed client-side to a maximum 2560 px JPEG at quality 0.85, with silent original-file fallback.
+34. **DEV** — Composer emoji insertion uses the existing compact preset set instead of jg’s full picker, while preserving insertion at the cursor.
+35. **OK** — Sending is optimistic and exposes retry plus inline error state.
+36. **OK** — The poll button is disabled while an image is staged as a UI convenience matching jg’s composer behavior; no dcm-side constraint requires it. Poll creation and attachment sending are separate API calls and separate message rows.
+37. **DEV** — Drafts are deliberately reset on conversation changes. jg’s cross-conversation draft leak is not reproduced.
+
+## Conversation list
+
+38. **BLOCKED** — dcm does not serialize `last_message`, so a last-message preview cannot be made correct against the real backend.
+39. **OK** — `last_message_at` renders through browser-native, locale-aware `Intl.RelativeTimeFormat` labels.
+40. **OK** — The existing MUI `selected={conversation.id === activeConversationId}` wiring produces the `Mui-selected` active-row highlight; it was verified and needs no redundant styling.
+41. **OK** — Unread badges and bold unread titles are present.
+42. **BLOCKED** — dcm stores the managed all/team distinction in `external_key` but omits it from conversation serialization. The UI must not guess from titles or other unrelated fields.
+43. **DEV** — Generic MUI kind icons replace jg’s richer per-kind/person avatar treatment while retaining type identification.
+44. **OK** — Mute and archive actions are present.
+
+## Timeline
+
+45. **OK** — New active-conversation messages auto-scroll when the reader was already near the bottom. Scrolled-up readers are not pulled away from history; this near-bottom gate is an intentional usability refinement.
+46. **OK** — Announcement messages render their deep-link action only when a host supplies `onAnnouncementLink`; routing remains a host-app responsibility.
+47. **OK** — Sender names remain visible for group and managed conversations and are suppressed in direct conversations. No sender-side bubble alignment scheme was added because it is not required for this capability.
+48. **OK** — Deleted tombstones, edited marker, and timestamps are rendered.
+
+## Read receipts
+
+49. **OK** — Read ticks mount only for the current user’s own persisted messages.
+50. **OK** — Non-direct recipient detail supplied by dcm is shown through a click/keyboard-openable popover list rather than hover-only tooltip. Direct conversations always suppress the detail control; dcm’s recipient-detail payload remains the moderator authorization boundary because no generic client moderator field exists.
+
+## Polls
+
+51. **BLOCKED** — dcm has no poll read serialization for question, option, or count data; client-side fabrication would hide the backend contract gap.
+52. **BLOCKED** — Per-option voter names are likewise absent from dcm’s readable poll contract.
+53. **BLOCKED** — Closed state and disabled-voting rendering depend on that absent poll read contract.
+54. **OK** — Composer starts at two options and disables adding options once it reaches ten; the server’s two-option minimum remains enforced.
+55. **OK** — Vote and close write paths are wired; their full read rendering remains subject to rows 51–53.
+
+## Live synchronization
+
+56. **BLOCKED** — Reaction frame handling remains intentionally ready, but dcm 2.36.1 does not emit `reaction` frames.
+57. **BLOCKED** — Poll-update frame handling remains intentionally ready, but dcm 2.36.1 does not emit `poll_updated` frames.
+58. **BLOCKED** — Conversation reorder and preview refresh require dcm’s missing `last_message` projection.
+59. **OK** — dcm’s emitted message, message-edited, and message-deleted frames are handled live.
+
+## Required backend follow-up
+
+Rows 27, 38, 42, 51–53, and 56–58 require a future dcm work order: expose readable thread receipt state, serialize `external_key` where managed all/team labeling is required, define and serialize the poll read contract, add `last_message`, and emit the designed realtime frames. Until then, these are explicit BLOCKED outcomes rather than simulated client behavior.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/i18n/messagingTranslations.ts

@@ -1,4 +1,8 @@
 export const messagingTranslations = {
+  'MessagingComposer.ADD_EMOJI': { de: 'Emoji hinzufügen', en: 'Add emoji', fr: 'Ajouter un emoji' },
+  'MessagingComposer.STAGED_FILES': { de: 'Vorgemerkte Anhänge', en: 'Staged attachments', fr: 'Pièces jointes préparées' },
+  'MessagingComposer.REMOVE_ATTACHMENT': { de: '{{name}} entfernen', en: 'Remove {{name}}', fr: 'Supprimer {{name}}' },
+  'MessagingComposer.UPLOADING': { de: 'Anhänge werden hochgeladen…', en: 'Uploading attachments…', fr: 'Téléversement des pièces jointes…' },
   'MessagingList.LABEL': { de: 'Unterhaltungen', en: 'Conversations', fr: 'Conversations' },
   'MessagingList.EMPTY': { de: 'Noch keine Unterhaltungen.', en: 'No conversations yet.', fr: 'Aucune conversation pour le moment.' },
   'MessagingList.NO_MESSAGES': { de: 'Noch keine Nachrichten', en: 'No messages yet', fr: 'Aucun message pour le moment' },
@@ -28,8 +32,29 @@ export const messagingTranslations = {
   'MessagingThread.SHOW_REPLIES': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
   'MessagingThread.HIDE_REPLIES': { de: 'Antworten ausblenden', en: 'Hide replies', fr: 'Masquer les réponses' },
   'MessagingThread.UNKNOWN_SENDER': { de: 'Unbekannte Person', en: 'Unknown person', fr: 'Personne inconnue' },
+  'MessagingThread.QUOTE_ATTACHMENT': { de: 'Anhang', en: 'Attachment', fr: 'Pièce jointe' },
+  'MessagingActions.MENU': { de: 'Nachrichtenaktionen', en: 'Message actions', fr: 'Actions du message' },
+  'MessagingActions.EDIT': { de: 'Bearbeiten', en: 'Edit', fr: 'Modifier' },
+  'MessagingActions.SAVE': { de: 'Speichern', en: 'Save', fr: 'Enregistrer' },
+  'MessagingActions.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingActions.DELETE': { de: 'Löschen', en: 'Delete', fr: 'Supprimer' },
+  'MessagingActions.COPY': { de: 'Kopieren', en: 'Copy', fr: 'Copier' },
+  'MessagingActions.DELETE_CONFIRM_TITLE': { de: 'Nachricht löschen?', en: 'Delete message?', fr: 'Supprimer le message ?' },
+  'MessagingActions.DELETE_CONFIRM_BODY': { de: 'Diese Nachricht wird für alle entfernt.', en: 'This message will be removed for everyone.', fr: 'Ce message sera supprimé pour tout le monde.' },
+  'MessagingActions.EDIT_ERROR': { de: 'Nachricht konnte nicht bearbeitet werden: {{message}}', en: 'Message could not be edited: {{message}}', fr: 'Impossible de modifier le message : {{message}}' },
+  'MessagingActions.DELETE_ERROR': { de: 'Nachricht konnte nicht gelöscht werden: {{message}}', en: 'Message could not be deleted: {{message}}', fr: 'Impossible de supprimer le message : {{message}}' },
+  'MessagingActions.COPY_ERROR': { de: 'Nachricht konnte nicht kopiert werden: {{message}}', en: 'Message could not be copied: {{message}}', fr: 'Impossible de copier le message : {{message}}' },
+  'MessagingDirect.LAUNCH': { de: 'Direktnachricht starten', en: 'Start direct message', fr: 'Démarrer un message direct' },
+  'MessagingDirect.TITLE': { de: 'Direktnachricht starten', en: 'Start direct message', fr: 'Démarrer un message direct' },
+  'MessagingDirect.CANDIDATES': { de: 'Empfängerinnen und Empfänger', en: 'Recipients', fr: 'Destinataires' },
+  'MessagingDirect.EMPTY': { de: 'Keine Personen verfügbar.', en: 'No people are available.', fr: 'Aucune personne n’est disponible.' },
+  'MessagingDirect.START': { de: 'Starten', en: 'Start', fr: 'Démarrer' },
+  'MessagingDirect.STARTING': { de: 'Direktnachricht wird gestartet…', en: 'Starting direct message…', fr: 'Démarrage du message direct…' },
+  'MessagingDirect.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingDirect.START_ERROR': { de: 'Direktnachricht konnte nicht gestartet werden.', en: 'Direct message could not be started.', fr: 'Impossible de démarrer le message direct.' },
   'MessagingReadTicks.ALL_READ': { de: 'Von allen gelesen', en: 'Read by everyone', fr: 'Lu par tout le monde' },
   'MessagingReadTicks.DELIVERED': { de: 'Zugestellt an {{count}}', en: 'Delivered to {{count}}', fr: 'Distribué à {{count}}' },
+  'MessagingReadTicks.RECIPIENTS': { de: 'Lesebestätigungen', en: 'Read recipients', fr: 'Destinataires lus' },
   'MessagingComposer.LABEL': { de: 'Nachricht verfassen', en: 'Compose message', fr: 'Rédiger un message' },
   'MessagingComposer.MESSAGE': { de: 'Nachricht', en: 'Message', fr: 'Message' },
   'MessagingComposer.SEND': { de: 'Senden', en: 'Send', fr: 'Envoyer' },
@@ -78,4 +103,5 @@ export const messagingTranslations = {
   'MessagingAnnouncement.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
   'MessagingAnnouncement.VALIDATION': { de: 'Ein Titel ist erforderlich.', en: 'A title is required.', fr: 'Un titre est requis.' },
   'MessagingAnnouncement.ERROR': { de: 'Ankündigung konnte nicht gesendet werden: {{message}}', en: 'Announcement could not be sent: {{message}}', fr: 'Impossible d’envoyer l’annonce : {{message}}' },
+  'MessagingAnnouncement.OPEN_LINK': { de: 'Link öffnen', en: 'Open link', fr: 'Ouvrir le lien' },
 };

package/src/index.js

@@ -69,6 +69,7 @@ export * from './messaging/api';
 export { MessagingProvider, useMessaging } from './messaging/MessagingProvider';
 export { ConversationList } from './messaging/ConversationList';
 export { ConversationLaunchers } from './messaging/ConversationLaunchers';
+export { DirectMessageLauncher } from './messaging/DirectMessageLauncher';
 export { Thread } from './messaging/Thread';
 export { MessageBubble } from './messaging/MessageBubble';
 export { ReadTicks } from './messaging/ReadTicks';