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

package/dist/messaging/AttachmentList.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMessaging } from './MessagingProvider';
+function isImage(attachment) { var _a; return (_a = attachment.content_type) === null || _a === void 0 ? void 0 : _a.startsWith('image/'); }
+function nameOf(attachment) { return attachment.filename || attachment.name || attachment.id; }
+/** Download-only attachment renderer; all bytes remain behind the authenticated REST endpoints. */
+export function AttachmentList({ attachments = [] }) {
+    const { t } = useTranslation();
+    const { getAttachment, getAttachmentThumbnail } = useMessaging();
+    const [previews, setPreviews] = useState({});
+    useEffect(() => {
+        let live = true;
+        const urls = [];
+        attachments.filter(isImage).forEach(async (attachment) => {
+            try {
+                const blob = await getAttachmentThumbnail(attachment.id);
+                const url = blob instanceof Blob ? URL.createObjectURL(blob) : blob === null || blob === void 0 ? void 0 : blob.url;
+                if (url && live) {
+                    urls.push(url);
+                    setPreviews((current) => (Object.assign(Object.assign({}, current), { [attachment.id]: url })));
+                }
+            }
+            catch ( /* The image remains available through the download action. */_a) { /* The image remains available through the download action. */ }
+        });
+        return () => { live = false; urls.forEach((url) => URL.revokeObjectURL(url)); };
+    }, [attachments, getAttachmentThumbnail]);
+    if (!attachments.length)
+        return null;
+    const download = async (attachment) => {
+        const blob = await getAttachment(attachment.id);
+        if (!(blob instanceof Blob))
+            return;
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = nameOf(attachment);
+        link.click();
+        URL.revokeObjectURL(url);
+    };
+    return _jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", "aria-label": t('MessagingAttachments.LABEL'), children: attachments.map((attachment) => _jsxs(Button, { type: "button", size: "small", onClick: () => download(attachment), children: [previews[attachment.id] && _jsx(Box, { component: "img", src: previews[attachment.id], alt: "", width: 36, height: 36, sx: { objectFit: 'cover', mr: 0.75 } }), t('MessagingAttachments.DOWNLOAD', { name: nameOf(attachment) })] }, attachment.id)) });
+}

package/dist/messaging/Composer.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, IconButton, LinearProgress, Menu, MenuItem, Stack, TextField, Typography } from '@mui/material';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import EmojiEmotionsOutlinedIcon from '@mui/icons-material/EmojiEmotionsOutlined';
+import PollOutlinedIcon from '@mui/icons-material/PollOutlined';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { compressImageForUpload } from './composerImageCompression';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+import { QUICK_EMOJIS } from './ReactionBar';
+function newRequestId() { var _a, _b; return ((_b = (_a = globalThis.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) === null || _b === void 0 ? void 0 : _b.call(_a)) || `message-${Date.now()}-${Math.random().toString(36).slice(2)}`; }
+function isImage(file) { var _a; return (_a = file.type) === null || _a === void 0 ? void 0 : _a.startsWith('image/'); }
+/**
+ * A provider-backed, independently mountable REST composer.
+ *
+ * `allowAnnouncement` and `linkTarget`: whether announcement composing (jg's
+ * `AnnouncementDialog` — title + body + a deep-link target) is offered here at
+ * all is a host decision (the server enforces who may actually post one; the
+ * client only offers the affordance). `linkTarget`'s VALUE is inherently
+ * app-specific navigation context (jg pre-fills it from the currently open
+ * event-info section) that ucm cannot compute itself, so the host supplies it.
+ */
+export function Composer({ conversationId, replyTarget = null, onReplyTargetChange, allowAnnouncement = false, linkTarget }) {
+    var _a;
+    const { t } = useTranslation();
+    const { sendMessage, sendAttachments, createConversationPoll } = useMessaging();
+    const [body, setBody] = useState('');
+    const [files, setFiles] = useState([]);
+    const [error, setError] = useState(null);
+    const [failed, setFailed] = useState(null);
+    const [sending, setSending] = useState(false);
+    const [pollOpen, setPollOpen] = useState(false);
+    const [pollQuestion, setPollQuestion] = useState('');
+    const [pollOptions, setPollOptions] = useState(['', '']);
+    const [allowMultiple, setAllowMultiple] = useState(false);
+    const [announcementOpen, setAnnouncementOpen] = useState(false);
+    const [announcementTitle, setAnnouncementTitle] = useState('');
+    const [announcementBody, setAnnouncementBody] = useState('');
+    const [emojiAnchor, setEmojiAnchor] = useState(null);
+    const [previews, setPreviews] = useState([]);
+    const [uploadProgress, setUploadProgress] = useState(null);
+    const inputRef = useRef(null);
+    const messageInputRef = useRef(null);
+    useEffect(() => {
+        if (replyTarget === null || replyTarget === void 0 ? void 0 : replyTarget.deleted_at)
+            onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null);
+    }, [replyTarget, onReplyTargetChange]);
+    useEffect(() => { setBody(''); setFiles([]); }, [conversationId]);
+    useEffect(() => {
+        const urls = files.map((file) => isImage(file) ? URL.createObjectURL(file) : null);
+        setPreviews(urls);
+        return () => urls.filter(Boolean).forEach((url) => URL.revokeObjectURL(url));
+    }, [files]);
+    const submit = async (requestId = newRequestId(), retry = false) => {
+        if (!body.trim() && !files.length)
+            return;
+        setSending(true);
+        setError(null);
+        const payload = { kind: 'chat', body: body.trim() || undefined, reply_to: (replyTarget === null || replyTarget === void 0 ? void 0 : replyTarget.id) || undefined, client_request_id: requestId };
+        try {
+            if (files.length) {
+                const formData = new FormData();
+                const uploadFiles = await Promise.all(files.map(compressImageForUpload));
+                uploadFiles.forEach((file) => formData.append('files[]', file));
+                if (payload.body)
+                    formData.append('body', payload.body);
+                if (payload.reply_to)
+                    formData.append('reply_to', String(payload.reply_to));
+                formData.append('client_request_id', requestId);
+                setUploadProgress(0);
+                const onUploadProgress = (event) => setUploadProgress(event.total ? Math.round((event.loaded / event.total) * 100) : null);
+                await sendAttachments(conversationId, formData, { clientRequestId: requestId, retry, onUploadProgress, optimisticMessage: { body: payload.body, reply_to: payload.reply_to, attachments: files.map((file, index) => ({ id: `local-${requestId}-${index}`, filename: file.name, content_type: file.type })) } });
+            }
+            else
+                await sendMessage(conversationId, payload, { clientRequestId: requestId, retry });
+            setBody('');
+            setFiles([]);
+            setFailed(null);
+            onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null);
+        }
+        catch (sendError) {
+            const message = extractApiErrorMessage(sendError);
+            setError(files.length ? t('MessagingComposer.UPLOAD_ERROR', { message }) : t('MessagingComposer.SEND_ERROR', { message }));
+            setFailed({ requestId, retry: true });
+        }
+        finally {
+            setSending(false);
+            setUploadProgress(null);
+        }
+    };
+    const removeFile = (index) => setFiles((current) => current.filter((_, fileIndex) => fileIndex !== index));
+    const insertEmoji = (emoji) => {
+        var _a, _b, _c, _d;
+        const input = ((_b = (_a = messageInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, 'textarea')) || messageInputRef.current;
+        const start = (_c = input === null || input === void 0 ? void 0 : input.selectionStart) !== null && _c !== void 0 ? _c : body.length;
+        const end = (_d = input === null || input === void 0 ? void 0 : input.selectionEnd) !== null && _d !== void 0 ? _d : start;
+        setBody(`${body.slice(0, start)}${emoji}${body.slice(end)}`);
+        setEmojiAnchor(null);
+        requestAnimationFrame(() => { input === null || input === void 0 ? void 0 : input.focus(); input === null || input === void 0 ? void 0 : input.setSelectionRange(start + emoji.length, start + emoji.length); });
+    };
+    const submitPoll = async () => {
+        const options = pollOptions.map((option) => option.trim()).filter(Boolean);
+        if (!pollQuestion.trim() || options.length < 2) {
+            setError(t('MessagingPoll.CREATE_VALIDATION'));
+            return;
+        }
+        setSending(true);
+        setError(null);
+        try {
+            await createConversationPoll(conversationId, { question: pollQuestion.trim(), options, allow_multiple: allowMultiple }, { clientRequestId: newRequestId() });
+            setPollQuestion('');
+            setPollOptions(['', '']);
+            setAllowMultiple(false);
+            setPollOpen(false);
+        }
+        catch (pollError) {
+            setError(t('MessagingPoll.CREATE_ERROR', { message: extractApiErrorMessage(pollError) }));
+        }
+        finally {
+            setSending(false);
+        }
+    };
+    const submitAnnouncement = async () => {
+        if (!announcementTitle.trim()) {
+            setError(t('MessagingAnnouncement.VALIDATION'));
+            return;
+        }
+        setSending(true);
+        setError(null);
+        const requestId = newRequestId();
+        try {
+            await sendMessage(conversationId, {
+                kind: 'announcement',
+                title: announcementTitle.trim(),
+                body: announcementBody.trim() || undefined,
+                link_target: linkTarget || undefined,
+                client_request_id: requestId,
+            }, { clientRequestId: requestId });
+            setAnnouncementTitle('');
+            setAnnouncementBody('');
+            setAnnouncementOpen(false);
+        }
+        catch (announcementError) {
+            setError(t('MessagingAnnouncement.ERROR', { message: extractApiErrorMessage(announcementError) }));
+        }
+        finally {
+            setSending(false);
+        }
+    };
+    return _jsxs(Stack, { component: "form", spacing: 1, onSubmit: (event) => { event.preventDefault(); submit(); }, "aria-label": t('MessagingComposer.LABEL'), children: [replyTarget && _jsx(Alert, { severity: "info", onClose: () => onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null), children: t('MessagingComposer.REPLYING_TO', { sender: ((_a = replyTarget.sender) === null || _a === void 0 ? void 0 : _a.display_name) || t('MessagingThread.UNKNOWN_SENDER') }) }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), files.length > 0 && _jsx(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", "aria-label": t('MessagingComposer.STAGED_FILES'), children: files.map((file, index) => _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.25, sx: { border: 1, borderColor: 'divider', borderRadius: 1, p: 0.25 }, children: [previews[index] && _jsx(Box, { component: "img", src: previews[index], alt: file.name, width: 36, height: 36, sx: { objectFit: 'cover' } }), _jsx(Typography, { variant: "caption", children: file.name }), _jsx(IconButton, { type: "button", size: "small", "aria-label": t('MessagingComposer.REMOVE_ATTACHMENT', { name: file.name }), onClick: () => removeFile(index), children: _jsx(CloseIcon, { fontSize: "inherit" }) })] }, `${file.name}-${index}`)) }), files.length > 0 && _jsx(Typography, { variant: "caption", children: t('MessagingComposer.FILES_SELECTED', { count: files.length }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-end", children: [_jsx("input", { ref: inputRef, hidden: true, type: "file", multiple: true, onChange: (event) => setFiles(Array.from(event.target.files || [])) }), _jsx(IconButton, { type: "button", "aria-label": t('MessagingComposer.ADD_ATTACHMENT'), onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: _jsx(AttachFileIcon, {}) }), _jsx(IconButton, { type: "button", "aria-label": t('MessagingComposer.ADD_EMOJI'), onClick: (event) => setEmojiAnchor(event.currentTarget), children: _jsx(EmojiEmotionsOutlinedIcon, {}) }), _jsx(IconButton, { type: "button", "aria-label": t('MessagingPoll.CREATE'), disabled: pollOpen || files.some(isImage), onClick: () => setPollOpen(true), children: _jsx(PollOutlinedIcon, {}) }), allowAnnouncement && _jsx(IconButton, { type: "button", "aria-label": t('MessagingAnnouncement.CREATE'), onClick: () => setAnnouncementOpen(true), children: _jsx(CampaignOutlinedIcon, {}) }), _jsx(TextField, { inputRef: messageInputRef, fullWidth: true, multiline: true, minRows: 2, value: body, onChange: (event) => setBody(event.target.value), onKeyDown: (event) => { if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+                            event.preventDefault();
+                            submit();
+                        } }, label: t('MessagingComposer.MESSAGE'), disabled: sending }), _jsx(Button, { type: "submit", variant: "contained", disabled: sending || (!body.trim() && !files.length), children: t('MessagingComposer.SEND') })] }), sending && files.length > 0 && _jsxs(Stack, { spacing: 0.5, role: "status", children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [uploadProgress == null ? _jsx(CircularProgress, { size: 16 }) : _jsx(CircularProgress, { size: 16, variant: "determinate", value: uploadProgress }), _jsx(Typography, { variant: "caption", children: t('MessagingComposer.UPLOADING') })] }), uploadProgress != null && _jsx(LinearProgress, { variant: "determinate", value: uploadProgress })] }), failed && _jsx(Button, { type: "button", onClick: () => submit(failed.requestId, true), disabled: sending, children: t('MessagingComposer.RETRY') }), _jsx(Menu, { anchorEl: emojiAnchor, open: Boolean(emojiAnchor), onClose: () => setEmojiAnchor(null), children: QUICK_EMOJIS.map((emoji) => _jsx(MenuItem, { onClick: () => insertEmoji(emoji), children: emoji }, emoji)) }), _jsxs(Dialog, { open: pollOpen, onClose: () => !sending && setPollOpen(false), fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('MessagingPoll.CREATE') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 1, sx: { pt: 1 }, children: [_jsx(TextField, { label: t('MessagingPoll.QUESTION'), value: pollQuestion, onChange: (event) => setPollQuestion(event.target.value), autoFocus: true }), pollOptions.map((option, index) => _jsx(TextField, { label: t('MessagingPoll.OPTION', { count: index + 1 }), value: option, onChange: (event) => setPollOptions((current) => current.map((value, optionIndex) => optionIndex === index ? event.target.value : value)) }, index)), _jsx(Button, { type: "button", disabled: pollOptions.length >= 10, onClick: () => setPollOptions((current) => [...current, '']), children: t('MessagingPoll.ADD_OPTION') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: allowMultiple, onChange: (event) => setAllowMultiple(event.target.checked) }), label: t('MessagingPoll.ALLOW_MULTIPLE') })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setPollOpen(false), children: t('MessagingPoll.CANCEL') }), _jsx(Button, { variant: "contained", onClick: submitPoll, disabled: sending, children: t('MessagingPoll.CREATE') })] })] }), allowAnnouncement && _jsxs(Dialog, { open: announcementOpen, onClose: () => !sending && setAnnouncementOpen(false), fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('MessagingAnnouncement.CREATE') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 1, sx: { pt: 1 }, children: [_jsx(TextField, { label: t('MessagingAnnouncement.TITLE'), value: announcementTitle, onChange: (event) => setAnnouncementTitle(event.target.value), autoFocus: true }), _jsx(TextField, { label: t('MessagingAnnouncement.BODY'), value: announcementBody, onChange: (event) => setAnnouncementBody(event.target.value), multiline: true, minRows: 2 })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setAnnouncementOpen(false), children: t('MessagingAnnouncement.CANCEL') }), _jsx(Button, { variant: "contained", onClick: submitAnnouncement, disabled: sending, children: t('MessagingAnnouncement.SEND') })] })] })] });
+}

package/dist/messaging/ConversationLaunchers.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Alert, Button, Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useMessaging } from './MessagingProvider';
+/**
+ * Host apps provide launchable scopes. This component owns the REST transition
+ * that turns one into a normalized conversation, but deliberately does not
+ * discover groups itself: that is app-specific scope-picker data.
+ */
+export function ConversationLaunchers({ groupLaunchers = [], broadcastLauncher, autoOpenBroadcast = false, onOpen }) {
+    const { t } = useTranslation();
+    const { openGroupConversation, openBroadcastConversation } = useMessaging();
+    const [error, setError] = useState(null);
+    const autoOpened = useRef(false);
+    const open = async (kind, payload) => {
+        setError(null);
+        try {
+            const conversation = kind === 'broadcast'
+                ? await openBroadcastConversation(payload)
+                : await openGroupConversation(payload);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(conversation);
+        }
+        catch (_a) {
+            setError(t('MessagingLaunchers.OPEN_ERROR'));
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (!autoOpenBroadcast || !broadcastLauncher || autoOpened.current)
+            return;
+        autoOpened.current = true;
+        open('broadcast', (_a = broadcastLauncher.payload) !== null && _a !== void 0 ? _a : broadcastLauncher);
+    }, [autoOpenBroadcast, broadcastLauncher]); // one intentional auto-open per mounted launcher
+    return (_jsxs(Stack, { spacing: 1, children: [broadcastLauncher && !autoOpenBroadcast && (_jsx(Button, { variant: "outlined", onClick: () => { var _a; return open('broadcast', (_a = broadcastLauncher.payload) !== null && _a !== void 0 ? _a : broadcastLauncher); }, children: broadcastLauncher.label || t('MessagingLaunchers.OPEN_BROADCAST') })), groupLaunchers.map((launcher) => {
+                var _a;
+                return (_jsx(Button, { variant: "outlined", onClick: () => { var _a; return open('group', (_a = launcher.payload) !== null && _a !== void 0 ? _a : launcher); }, children: launcher.label || t('MessagingLaunchers.OPEN_GROUP') }, (_a = launcher.id) !== null && _a !== void 0 ? _a : launcher.label));
+            }), error && _jsx(Alert, { severity: "error", children: error })] }));
+}

package/dist/messaging/ConversationList.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Archive, Campaign, Groups, MoreVert, NotificationsOff, Person } from '@mui/icons-material';
+import { Badge, Box, Button, CircularProgress, IconButton, List, ListItemButton, ListItemText, Menu, MenuItem, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useMessaging } from './MessagingProvider';
+import { ConversationLaunchers } from './ConversationLaunchers';
+function titleOf(conversation, t) { var _a, _b; return conversation.title || ((_a = conversation.other_user) === null || _a === void 0 ? void 0 : _a.display_name) || ((_b = conversation.other_user) === null || _b === void 0 ? void 0 : _b.username) || t('MessagingList.UNTITLED'); }
+function ordered(conversations) {
+    return [...conversations].sort((left, right) => new Date(right.last_message_at || 0) - new Date(left.last_message_at || 0));
+}
+function relativeTime(value, locale) {
+    if (!value)
+        return null;
+    const seconds = Math.max(0, Math.floor((Date.now() - new Date(value).getTime()) / 1000));
+    const [amount, unit] = seconds < 60 ? [0, 'second'] : seconds < 3600 ? [Math.floor(seconds / 60), 'minute'] : seconds < 86400 ? [Math.floor(seconds / 3600), 'hour'] : [Math.floor(seconds / 86400), 'day'];
+    return new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' }).format(-amount, unit);
+}
+// jg's ConversationList renders a distinct icon per conversation kind so a
+// user can identify type/person at a glance (getConversationAvatar); that
+// glanceable identification is a feature, not layout, so it's reproduced
+// here rather than left as a generic archive-status glyph.
+function KindIcon({ conversation }) {
+    if (conversation.kind === 'broadcast')
+        return _jsx(Campaign, { fontSize: "small" });
+    if (conversation.kind === 'group' || conversation.kind === 'managed' || conversation.kind === 'object_thread')
+        return _jsx(Groups, { fontSize: "small" });
+    return _jsx(Person, { fontSize: "small" });
+}
+/** A standalone, provider-backed list; scope picker metadata is supplied as launcher props. */
+export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, autoOpenBroadcast = false, includeArchived = false }) {
+    const { t, i18n } = useTranslation();
+    const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences, markConversationRead } = useMessaging();
+    const [menuConversation, setMenuConversation] = useState(null);
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [error, setError] = useState(null);
+    const conversations = useMemo(() => ordered(Object.values(cache.conversations).filter((item) => includeArchived || !item.archived_at && !item.archived)), [cache.conversations, includeArchived]);
+    const unreadFor = (conversation) => { var _a, _b, _c; return (_c = (_a = conversation.unread_count) !== null && _a !== void 0 ? _a : (_b = cache.unread.by_conversation) === null || _b === void 0 ? void 0 : _b[conversation.id]) !== null && _c !== void 0 ? _c : 0; };
+    // Once opened, the broadcast conversation becomes a normal, recency-sorted
+    // row with real unread/preview state — hide the static launcher so it isn't
+    // shown twice (button + list row) with the button's stale, unread-less copy.
+    const broadcastAlreadyOpened = useMemo(() => Object.values(cache.conversations).some((item) => item.kind === 'broadcast'), [cache.conversations]);
+    const loadMore = async () => {
+        setLoadingMore(true);
+        setError(null);
+        try {
+            await loadMoreConversations();
+        }
+        catch (_a) {
+            setError(t('MessagingList.LOAD_ERROR'));
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    };
+    const closeMenu = () => { setMenuConversation(null); setMenuAnchor(null); };
+    const archive = async () => {
+        try {
+            await setConversationArchived(menuConversation.id, true);
+        }
+        catch (_a) {
+            setError(t('MessagingList.ARCHIVE_ERROR'));
+        }
+        closeMenu();
+    };
+    const toggleMute = async () => {
+        try {
+            await setConversationPreferences(menuConversation.id, { muted: !menuConversation.muted });
+        }
+        catch (_a) {
+            setError(t('MessagingList.PREFERENCES_ERROR'));
+        }
+        closeMenu();
+    };
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(ConversationLaunchers, { groupLaunchers: groupLaunchers, broadcastLauncher: broadcastAlreadyOpened ? null : broadcastLauncher, autoOpenBroadcast: autoOpenBroadcast && !broadcastAlreadyOpened, onOpen: onOpen }), error && _jsx(Typography, { color: "error", role: "alert", children: error }), !conversations.length ? _jsx(Box, { sx: { py: 3, textAlign: 'center' }, children: _jsx(Typography, { color: "text.secondary", children: t('MessagingList.EMPTY') }) }) : (_jsx(List, { disablePadding: true, "aria-label": t('MessagingList.LABEL'), children: conversations.map((conversation) => {
+                    var _a;
+                    const unread = unreadFor(conversation);
+                    const archived = Boolean(conversation.archived || conversation.archived_at);
+                    return _jsxs(ListItemButton, { selected: conversation.id === activeConversationId, onClick: () => { markConversationRead(conversation.id).catch(() => { }); onOpen === null || onOpen === void 0 ? void 0 : onOpen(conversation); }, sx: { minHeight: 64, opacity: archived ? 0.6 : 1 }, children: [_jsx(Badge, { color: "error", badgeContent: unread || null, max: 99, sx: { mr: 2 }, children: archived ? _jsx(Archive, { fontSize: "small", color: "disabled" }) : _jsx(KindIcon, { conversation: conversation }) }), _jsx(ListItemText, { primary: _jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { component: "span", fontWeight: unread ? 700 : 400, noWrap: true, children: titleOf(conversation, t) }), relativeTime(conversation.last_message_at, i18n === null || i18n === void 0 ? void 0 : i18n.language) && _jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", noWrap: true, children: relativeTime(conversation.last_message_at, i18n === null || i18n === void 0 ? void 0 : i18n.language) })] }), secondary: ((_a = conversation.last_message) === null || _a === void 0 ? void 0 : _a.body) || t('MessagingList.NO_MESSAGES'), secondaryTypographyProps: { noWrap: true } }), _jsx(IconButton, { "aria-label": t('MessagingList.ACTIONS'), onClick: (event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }, children: _jsx(MoreVert, {}) })] }, conversation.id);
+                }) })), cache.cursors.conversations && _jsx(Button, { onClick: loadMore, disabled: loadingMore, children: loadingMore ? _jsx(CircularProgress, { size: 18 }) : t('MessagingList.LOAD_MORE') }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuConversation), onClose: closeMenu, children: [_jsxs(MenuItem, { onClick: toggleMute, children: [_jsx(NotificationsOff, { fontSize: "small", sx: { mr: 1 } }), (menuConversation === null || menuConversation === void 0 ? void 0 : menuConversation.muted) ? t('MessagingList.UNMUTE') : t('MessagingList.MUTE')] }), _jsxs(MenuItem, { onClick: archive, children: [_jsx(Archive, { fontSize: "small", sx: { mr: 1 } }), t('MessagingList.ARCHIVE')] })] })] }));
+}

package/dist/messaging/DirectMessageLauncher.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Alert, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItemButton, ListItemText, Typography, useMediaQuery, } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+/**
+ * Starts direct conversations from host-provided people. Candidate discovery is
+ * intentionally outside messaging because memberships are host-domain data.
+ */
+export function DirectMessageLauncher({ candidates = [], scope, onOpen }) {
+    const { t } = useTranslation();
+    const { openDirectConversation } = useMessaging();
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const [open, setOpen] = useState(false);
+    const [selectedId, setSelectedId] = useState(null);
+    const [starting, setStarting] = useState(false);
+    const [error, setError] = useState(null);
+    const titleId = useId();
+    const showPicker = () => {
+        setSelectedId(null);
+        setError(null);
+        setOpen(true);
+    };
+    const closePicker = () => {
+        if (!starting)
+            setOpen(false);
+    };
+    const start = async () => {
+        if (selectedId == null || starting)
+            return;
+        setStarting(true);
+        setError(null);
+        try {
+            const conversation = await openDirectConversation(Object.assign({ target_user_id: selectedId }, (scope == null ? {} : { scope })));
+            setOpen(false);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(conversation);
+        }
+        catch (requestError) {
+            setError(extractApiErrorMessage(requestError) || t('MessagingDirect.START_ERROR'));
+        }
+        finally {
+            setStarting(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", onClick: showPicker, children: t('MessagingDirect.LAUNCH') }), _jsxs(Dialog, { open: open, onClose: closePicker, fullScreen: fullScreen, "aria-labelledby": titleId, children: [_jsx(DialogTitle, { id: titleId, children: t('MessagingDirect.TITLE') }), _jsxs(DialogContent, { children: [error && _jsx(Alert, { severity: "error", sx: { mb: 1 }, children: error }), starting && _jsxs(Typography, { role: "status", sx: { mb: 1 }, children: [_jsx(CircularProgress, { size: 16, sx: { mr: 1 } }), t('MessagingDirect.STARTING')] }), candidates.length === 0 ? (_jsx(Typography, { children: t('MessagingDirect.EMPTY') })) : (_jsx(List, { "aria-label": t('MessagingDirect.CANDIDATES'), children: candidates.map((candidate) => (_jsx(ListItemButton, { selected: candidate.id === selectedId, disabled: starting, onClick: () => setSelectedId(candidate.id), children: _jsx(ListItemText, { primary: candidate.display_name || candidate.name || candidate.label || candidate.id }) }, candidate.id))) }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: closePicker, disabled: starting, children: t('MessagingDirect.CANCEL') }), _jsx(Button, { variant: "contained", onClick: start, disabled: selectedId == null || starting, children: t('MessagingDirect.START') })] })] })] }));
+}

package/dist/messaging/MessageBubble.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AttachmentList } from './AttachmentList';
+import { extractApiErrorMessage, useOptionalMessaging } from './MessagingProvider';
+import { ReactionBar } from './ReactionBar';
+import { PollCard } from './PollCard';
+function senderName(message) {
+    var _a, _b, _c;
+    return ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.display_name) || ((_b = message.sender) === null || _b === void 0 ? void 0 : _b.username) || message.sender_name || ((_c = message.sender) === null || _c === void 0 ? void 0 : _c.name);
+}
+function quoteSnippet(message) {
+    const content = message.body || message.title;
+    if (!content)
+        return null;
+    return content.length > 120 ? `${content.slice(0, 117)}...` : content;
+}
+// A quoted source can be textless for two different reasons: it was deleted
+// (server blanks body/title/link_target on soft delete), or it always had no
+// text — an attachment-only chat send is a real, reachable case (Composer
+// only requires body OR files). Collapsing both into "This message was
+// deleted" would mislabel the second case, so they're distinguished here.
+function quoteLabel(message, t) {
+    var _a;
+    if (message.deleted_at)
+        return t('MessagingThread.DELETED');
+    const snippet = quoteSnippet(message);
+    if (snippet)
+        return snippet;
+    return ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) ? t('MessagingThread.QUOTE_ATTACHMENT') : '';
+}
+/** Provider-backed timeline collaborator, including per-message mutations. */
+export function MessageBubble({ message, replyTo, conversation, onReply, onJumpToMessage, onAnnouncementLink, canModerateMessages = false, children }) {
+    var _a;
+    const { t } = useTranslation();
+    const messaging = useOptionalMessaging();
+    const { currentUser, editMessage, removeMessage } = messaging || {};
+    const deleted = Boolean(message.deleted_at);
+    const attachments = message.attachments || [];
+    const canAct = !deleted && message.kind !== 'poll' && ((Boolean(currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) && ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.id) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id)) || canModerateMessages);
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(message.body || '');
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (deleted) {
+            setEditing(false);
+            setConfirmingDelete(false);
+            setMenuAnchor(null);
+        }
+    }, [deleted]);
+    const closeMenu = () => setMenuAnchor(null);
+    const openMenu = (event) => { event.preventDefault(); setMenuAnchor(event.currentTarget); };
+    const startEdit = () => { setDraft(message.body || ''); setEditing(true); closeMenu(); };
+    const saveEdit = async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            await (editMessage === null || editMessage === void 0 ? void 0 : editMessage(message.id, { body: draft.trim() }));
+            setEditing(false);
+        }
+        catch (saveError) {
+            setError(t('MessagingActions.EDIT_ERROR', { message: extractApiErrorMessage(saveError) }));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const confirmDelete = async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            await (removeMessage === null || removeMessage === void 0 ? void 0 : removeMessage(message.id));
+            setConfirmingDelete(false);
+        }
+        catch (deleteError) {
+            setError(t('MessagingActions.DELETE_ERROR', { message: extractApiErrorMessage(deleteError) }));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const copyMessage = async () => {
+        closeMenu();
+        try {
+            await navigator.clipboard.writeText(message.body || '');
+        }
+        catch (copyError) {
+            setError(t('MessagingActions.COPY_ERROR', { message: extractApiErrorMessage(copyError) }));
+        }
+    };
+    return (_jsxs(Paper, { component: "article", variant: "outlined", sx: { p: 1.25, maxWidth: 'min(100%, 680px)', '& .message-actions': { opacity: 0 }, '&:hover .message-actions': { opacity: 1 } }, "aria-label": t('MessagingThread.MESSAGE'), "data-message-id": message.id, onContextMenu: canAct ? openMenu : undefined, children: [_jsxs(Stack, { spacing: 0.75, children: [replyTo && _jsx(Button, { type: "button", variant: "text", size: "small", onClick: () => onJumpToMessage === null || onJumpToMessage === void 0 ? void 0 : onJumpToMessage(replyTo.id), sx: { justifyContent: 'flex-start', px: 0, textAlign: 'left', textTransform: 'none' }, children: _jsxs(Stack, { spacing: 0, alignItems: "flex-start", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: quoteLabel(replyTo, t) })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "baseline", children: [(conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct' && _jsx(Typography, { variant: "subtitle2", children: senderName(message) || t('MessagingThread.UNKNOWN_SENDER') }), message.created_at && _jsx(Typography, { variant: "caption", color: "text.secondary", children: new Date(message.created_at).toLocaleString() }), message.edited_at && !deleted && _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.EDITED') })] }), !deleted && message.kind === 'announcement' && message.title && _jsx(Typography, { variant: "subtitle1", fontWeight: 700, children: message.title }), !deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && _jsx(Button, { type: "button", size: "small", onClick: () => onAnnouncementLink(message.link_target), children: t('MessagingAnnouncement.OPEN_LINK') }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), editing ? _jsxs(Stack, { spacing: 0.75, children: [_jsx(TextField, { label: t('MessagingActions.EDIT'), value: draft, onChange: (event) => setDraft(event.target.value), multiline: true, minRows: 2, autoFocus: true, disabled: saving }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "button", onClick: saveEdit, disabled: saving, children: t('MessagingActions.SAVE') }), _jsx(Button, { type: "button", onClick: () => setEditing(false), disabled: saving, children: t('MessagingActions.CANCEL') })] })] }) : _jsx(Typography, { sx: { whiteSpace: 'pre-wrap' }, children: deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || '' }), !deleted && _jsxs(Stack, { spacing: 0.75, children: [attachments.length > 0 && _jsx(AttachmentList, { attachments: attachments }), _jsx(ReactionBar, { message: message }), message.poll && _jsx(PollCard, { message: message })] }), !deleted && onReply && _jsx(Button, { type: "button", size: "small", onClick: () => onReply(message), children: t('MessagingThread.REPLY') }), canAct && _jsx(IconButton, { className: "message-actions", size: "small", "aria-label": t('MessagingActions.MENU'), onClick: openMenu, children: _jsx(MoreVertIcon, {}) }), children] }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: closeMenu, children: [_jsx(MenuItem, { onClick: startEdit, children: t('MessagingActions.EDIT') }), _jsx(MenuItem, { onClick: () => { setConfirmingDelete(true); closeMenu(); }, children: t('MessagingActions.DELETE') }), _jsx(MenuItem, { onClick: copyMessage, children: t('MessagingActions.COPY') })] }), _jsxs(Dialog, { open: confirmingDelete, onClose: () => !saving && setConfirmingDelete(false), children: [_jsx(DialogTitle, { children: t('MessagingActions.DELETE_CONFIRM_TITLE') }), _jsx(DialogContent, { children: t('MessagingActions.DELETE_CONFIRM_BODY') }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setConfirmingDelete(false), disabled: saving, children: t('MessagingActions.CANCEL') }), _jsx(Button, { onClick: confirmDelete, disabled: saving, color: "error", children: t('MessagingActions.DELETE') })] })] })] }));
+}