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

package/src/messaging/MessageBubble.jsx

@@ -1,37 +1,104 @@
-import { Button, Paper, Stack, Typography } from '@mui/material';
+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) {
   return message.sender?.display_name || message.sender?.username || message.sender_name || message.sender?.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) {
+  if (message.deleted_at) return t('MessagingThread.DELETED');
+  const snippet = quoteSnippet(message);
+  if (snippet) return snippet;
+  return message.attachments?.length ? t('MessagingThread.QUOTE_ATTACHMENT') : '';
+}
 
-/** Provider-backed timeline collaborator; it deliberately has no mutation controls. */
-export function MessageBubble({ message, replyTo, onReply, children }) {
+/** Provider-backed timeline collaborator, including per-message mutations. */
+export function MessageBubble({ message, replyTo, conversation, onReply, onJumpToMessage, onAnnouncementLink, canModerateMessages = false, children }) {
   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?.id) && message.sender?.id === 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?.(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?.(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 (
-    <Paper component="article" variant="outlined" sx={{ p: 1.25, maxWidth: 'min(100%, 680px)' }} aria-label={t('MessagingThread.MESSAGE')}>
+    <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}>
       <Stack spacing={0.75}>
-        {replyTo && <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>}
+        {replyTo && <Button type="button" variant="text" size="small" onClick={() => onJumpToMessage?.(replyTo.id)} sx={{ justifyContent: 'flex-start', px: 0, textAlign: 'left', textTransform: 'none' }}>
+          <Stack spacing={0} alignItems="flex-start">
+            <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>
+            <Typography variant="caption" color="text.secondary">{quoteLabel(replyTo, t)}</Typography>
+          </Stack>
+        </Button>}
         <Stack direction="row" spacing={1} alignItems="baseline">
-          <Typography variant="subtitle2">{senderName(message) || t('MessagingThread.UNKNOWN_SENDER')}</Typography>
+          {conversation?.kind !== 'direct' && <Typography variant="subtitle2">{senderName(message) || t('MessagingThread.UNKNOWN_SENDER')}</Typography>}
           {message.created_at && <Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleString()}</Typography>}
           {message.edited_at && !deleted && <Typography variant="caption" color="text.secondary">{t('MessagingThread.EDITED')}</Typography>}
         </Stack>
         {!deleted && message.kind === 'announcement' && message.title && <Typography variant="subtitle1" fontWeight={700}>{message.title}</Typography>}
-        <Typography sx={{ whiteSpace: 'pre-wrap' }}>{deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || ''}</Typography>
+        {!deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && <Button type="button" size="small" onClick={() => onAnnouncementLink(message.link_target)}>{t('MessagingAnnouncement.OPEN_LINK')}</Button>}
+        {error && <Alert severity="error" role="alert">{error}</Alert>}
+        {editing ? <Stack spacing={0.75}><TextField label={t('MessagingActions.EDIT')} value={draft} onChange={(event) => setDraft(event.target.value)} multiline minRows={2} autoFocus disabled={saving} /><Stack direction="row" spacing={1}><Button type="button" onClick={saveEdit} disabled={saving}>{t('MessagingActions.SAVE')}</Button><Button type="button" onClick={() => setEditing(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button></Stack></Stack> : <Typography sx={{ whiteSpace: 'pre-wrap' }}>{deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || ''}</Typography>}
         {!deleted && <Stack spacing={0.75}>
           {attachments.length > 0 && <AttachmentList attachments={attachments} />}
           <ReactionBar message={message} />
           {message.poll && <PollCard message={message} />}
         </Stack>}
         {!deleted && onReply && <Button type="button" size="small" onClick={() => onReply(message)}>{t('MessagingThread.REPLY')}</Button>}
+        {canAct && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu}><MoreVertIcon /></IconButton>}
         {children}
       </Stack>
+      <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu}>
+        <MenuItem onClick={startEdit}>{t('MessagingActions.EDIT')}</MenuItem>
+        <MenuItem onClick={() => { setConfirmingDelete(true); closeMenu(); }}>{t('MessagingActions.DELETE')}</MenuItem>
+        <MenuItem onClick={copyMessage}>{t('MessagingActions.COPY')}</MenuItem>
+      </Menu>
+      <Dialog open={confirmingDelete} onClose={() => !saving && setConfirmingDelete(false)}>
+        <DialogTitle>{t('MessagingActions.DELETE_CONFIRM_TITLE')}</DialogTitle>
+        <DialogContent>{t('MessagingActions.DELETE_CONFIRM_BODY')}</DialogContent>
+        <DialogActions><Button onClick={() => setConfirmingDelete(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button><Button onClick={confirmDelete} disabled={saving} color="error">{t('MessagingActions.DELETE')}</Button></DialogActions>
+      </Dialog>
     </Paper>
   );
 }

package/src/messaging/MessagingProvider.jsx

@@ -4,6 +4,7 @@ import { AuthContext } from '../auth/AuthContext';
 import {
   archiveConversation,
   createBroadcastConversation,
+  createDirectConversation,
   createGroupConversation,
   getReadStatus,
   getUnreadCount,
@@ -11,6 +12,8 @@ import {
   listMessages,
   listThread,
   patchConversationPreferences,
+  markConversationRead,
+  markThreadRead,
   createMessage,
   uploadAttachments,
   getAttachment,
@@ -22,6 +25,8 @@ import {
   closePoll,
   getConversationConfig,
   patchConversationConfig,
+  patchMessage as patchMessageRequest,
+  deleteMessage as deleteMessageRequest,
 } from './api';
 import { useRealtime } from '../notifications/realtime';
 
@@ -30,9 +35,11 @@ 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) { return item?.id ?? item?.conversation_id ?? item?.message_id ?? item?.poll_id; }
@@ -96,28 +103,84 @@ export function messagingReducer(state, action) {
       return { ...state, messages: { ...state.messages, [key]: { ...message, status: 'error', error: action.error } } };
     }
     case 'messagePatched': return { ...state, messages: mergeById(state.messages, action.message) };
-    case 'frame': return applyFrame(state, action.frame);
+    case 'conversationRead': {
+      const previousCount = state.unread?.by_conversation?.[action.conversationId] || 0;
+      if (!previousCount) return state;
+      return {
+        ...state,
+        unread: {
+          ...state.unread,
+          unread_count: Math.max(0, (state.unread?.unread_count || 0) - previousCount),
+          by_conversation: { ...state.unread.by_conversation, [action.conversationId]: 0 },
+        },
+      };
+    }
+    case 'frame': return applyFrame(state, action.frame, action.activeConversationId);
     default: return state;
   }
 }
 
-export function applyFrame(state, frame) {
+export function applyFrame(state, frame, activeConversationId = null) {
   const payload = frame.message || frame.conversation || frame.participant || frame;
   const conversationId = frame.conversation_id ?? payload.conversation_id;
   if (frame.type === 'message') {
     const message = { ...payload, conversation_id: conversationId };
-    return { ...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 { ...state, messages };
+    const unread = state.unread || EMPTY_CACHE.unread;
+    const previousCount = unread.by_conversation?.[conversationId] || 0;
+    return {
+      ...state,
+      messages,
+      unread: {
+        ...unread,
+        unread_count: (unread.unread_count || 0) + 1,
+        by_conversation: { ...unread.by_conversation, [conversationId]: previousCount + 1 },
+      },
+    };
+  }
+  if (frame.type === 'message_edited') {
+    // dcm's publish_messaging_event always attaches a full frame.message
+    // (serialize_message) for this event type, so `payload` already carries
+    // the message's own `.id` in practice. The explicit `id:` override below
+    // is defensive only — it keeps this branch correct even if a future
+    // producer ever omits `.message` and falls through to the raw frame,
+    // whose `conversation_id` would otherwise win idOf()'s fallback order.
+    const messageId = frame.message_id ?? payload.message_id;
+    return { ...state, messages: mergeById(state.messages, { ...payload, id: messageId }) };
   }
-  if (frame.type === 'message_edited') return { ...state, messages: mergeById(state.messages, payload) };
   if (frame.type === 'reaction') {
     const messageId = frame.message_id ?? payload.message_id;
     const previous = state.messages[messageId] || { id: messageId };
-    return { ...state, messages: mergeById(state.messages, { ...previous, reactions: payload.reactions || frame.reactions || previous.reactions || [] }) };
+    // serialize_reactions (dcm) returns [{emoji, count}] only, never a
+    // per-viewer `reacted` flag, in any context — not REST, not frames, by
+    // design (aggregate-only). Wholesale-replacing `reactions` with the
+    // incoming server list would silently wipe every previously-known
+    // `reacted` flag on this message, not just whichever emoji changed.
+    // Merge by emoji instead: carry forward a previously-known `reacted`
+    // flag for any emoji still present in the incoming aggregate.
+    const incoming = payload.reactions || frame.reactions || previous.reactions || [];
+    const previousByEmoji = new Map((previous.reactions || []).map((reaction) => [reaction.emoji, reaction]));
+    const reactions = incoming.map((reaction) => ({ ...reaction, reacted: reaction.reacted ?? previousByEmoji.get(reaction.emoji)?.reacted ?? false }));
+    return { ...state, messages: mergeById(state.messages, { ...previous, reactions }) };
   }
   if (frame.type === 'poll_updated') {
     const messageId = frame.message_id ?? payload.message_id;
     const previous = state.messages[messageId] || { id: messageId };
-    const poll = payload.poll || frame.poll || payload;
+    const incomingPoll = payload.poll || frame.poll || payload;
+    // dcm's poll_updated frame is a viewer-independent projection
+    // (serialize_poll) — it never carries voted_option_ids, which dcm only
+    // ever adds to this viewer's own vote/create/close REST response. A
+    // frame arriving after a REST-derived vote is known must not wipe that
+    // locally-known selection; carry it forward when the frame is silent
+    // about it, never invert it from frame data that structurally can't
+    // contain it.
+    const previousVotedOptionIds = previous.poll?.voted_option_ids;
+    const poll = incomingPoll.voted_option_ids === undefined && previousVotedOptionIds
+      ? { ...incomingPoll, voted_option_ids: previousVotedOptionIds }
+      : incomingPoll;
     return { ...state, messages: mergeById(state.messages, { ...previous, poll }), polls: mergeById(state.polls, poll) };
   }
   if (frame.type === 'message_deleted') {
@@ -191,6 +254,12 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     const conversation = await api.patchConversationPreferences(conversationId, patch);
     return updateConversation({ ...conversation, id: conversation?.id ?? 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);
@@ -199,6 +268,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 } = {}) => {
     const requestId = clientRequestId || payload.client_request_id;
     const optimistic = {
@@ -226,7 +299,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 } = {}) => {
     const optimistic = {
       id: `local-${clientRequestId}`, conversation_id: conversationId, kind: 'chat', body: optimisticMessage?.body || '',
       reply_to: optimisticMessage?.reply_to || null, client_request_id: clientRequestId, created_at: new Date().toISOString(), status: 'pending',
@@ -236,7 +309,7 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     if (!retry) dispatch({ type: 'messageOptimistic', message: optimistic });
     else dispatch({ type: 'messageReconciled', message: { ...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: { ...message, conversation_id: message?.conversation_id ?? conversationId, client_request_id: message?.client_request_id ?? clientRequestId } });
       return message;
     } catch (error) {
@@ -245,6 +318,30 @@ 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) => {
+    const result = await api.patchMessage(messageId, patch);
+    const message = result?.message || result;
+    patchMessage({ ...(cache.messages[messageId] || { id: messageId }), ...(message || {}), id: message?.id ?? messageId });
+    return result;
+  }, [api, cache.messages, patchMessage]);
+  const removeMessage = useCallback(async (messageId) => {
+    const result = await api.deleteMessage(messageId);
+    const message = result?.message || result;
+    const previous = cache.messages[messageId] || { id: messageId };
+    patchMessage({
+      ...previous,
+      ...(message || {}),
+      id: message?.id ?? messageId,
+      deleted_at: message?.deleted_at ?? previous.deleted_at ?? new Date().toISOString(),
+      deleted_by: message?.deleted_by ?? previous.deleted_by ?? user?.id,
+      body: null,
+      title: null,
+      link_target: null,
+    });
+    return result;
+  }, [api, cache.messages, patchMessage, user]);
   const toggleReaction = useCallback(async (messageId, emoji, active) => {
     const message = cache.messages[messageId] || { id: messageId };
     const reactions = message.reactions || [];
@@ -257,7 +354,14 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     patchMessage({ ...message, reactions: nextReactions });
     try {
       const result = active ? await api.removeReaction(messageId, emoji) : await api.addReaction(messageId, emoji);
-      patchMessage({ ...message, ...(result?.message || result), reactions: result?.reactions || result?.message?.reactions || nextReactions });
+      // Same aggregate-only shape as the realtime `reaction` frame (serialize_reactions
+      // never returns a per-viewer `reacted` flag) — merge the server's confirmed
+      // counts with the reacted flags nextReactions already computed correctly,
+      // rather than letting the reacted-less server array wipe them.
+      const confirmedCounts = result?.reactions || result?.message?.reactions;
+      const nextByEmoji = new Map(nextReactions.map((reaction) => [reaction.emoji, reaction]));
+      const reactions = confirmedCounts ? confirmedCounts.map((reaction) => ({ ...reaction, reacted: reaction.reacted ?? nextByEmoji.get(reaction.emoji)?.reacted ?? false })) : nextReactions;
+      patchMessage({ ...message, ...(result?.message || result), reactions });
       return result;
     } catch (error) { patchMessage(message); throw error; }
   }, [api, cache.messages, patchMessage]);
@@ -296,7 +400,7 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
       seenEventsRef.current.add(frame.event_id);
       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) return undefined;
@@ -306,18 +410,23 @@ 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 <MessagingContext.Provider value={value}>{children}</MessagingContext.Provider>;
 }
 
 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/src/messaging/PollCard.jsx

@@ -12,10 +12,18 @@ export function PollCard({ message, canClose: canCloseProp }) {
   const [selected, setSelected] = useState([]);
   const [error, setError] = useState(null);
   const [busy, setBusy] = useState(false);
-  useEffect(() => setSelected((poll?.options || []).filter((option) => option.selected || option.voted).map((option) => option.id)), [poll]);
+  // voted_option_ids is a view-level enrichment dcm adds ONLY to the
+  // create/vote/close poll REST responses (serialize_poll itself, every
+  // message-list/thread load, and every poll_updated realtime frame never
+  // carry it) — so it's only ever present right after this viewer's own
+  // vote/create/close action. When it's absent (a freshly loaded or
+  // frame-updated poll), there's no way to know this viewer's vote from the
+  // payload alone; default to no selection rather than guessing or carrying
+  // over stale local state.
+  useEffect(() => setSelected(poll?.voted_option_ids ? [...poll.voted_option_ids] : []), [poll]);
   if (!poll) return null;
   const closed = Boolean(poll.closed_at);
-  const creatorId = poll.created_by?.id ?? poll.created_by;
+  const creatorId = poll.created_by_id ?? poll.created_by?.id ?? poll.created_by;
   const canClose = canCloseProp ?? poll.can_close ?? message?.can_close ?? message?.permissions?.can_close ?? (creatorId != null && creatorId === currentUser?.id);
   const changeSelection = (id) => setSelected((current) => poll.allow_multiple ? (current.includes(id) ? current.filter((value) => value !== id) : [...current, id]) : (current.includes(id) ? [] : [id]));
   const vote = async () => {
@@ -29,7 +37,15 @@ export function PollCard({ message, canClose: canCloseProp }) {
   };
   return <Paper variant="outlined" sx={{ p: 1 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={0.5}>
     <Typography variant="subtitle2">{poll.question}</Typography>
-    {(poll.options || []).map((option) => <FormControlLabel key={option.id} disabled={closed || busy} control={<Checkbox checked={selected.includes(option.id)} onChange={() => changeSelection(option.id)} />} label={`${option.text || option.label} (${option.vote_count ?? option.votes_count ?? 0})`} />)}
+    {(poll.options || []).map((option) => {
+      // dcm's poll projection gives voter user ids only, never names — there
+      // is no user-directory endpoint (same structural limit already
+      // established for the DM candidate list). A count is always correct;
+      // marking the viewer's own vote is derivable from voted_option_ids.
+      const votedByMe = Boolean(poll.voted_option_ids?.includes(option.id));
+      const voterCount = option.voters?.length ?? option.vote_count ?? option.votes_count ?? 0;
+      return <FormControlLabel key={option.id} disabled={closed || busy} control={<Checkbox checked={selected.includes(option.id)} onChange={() => changeSelection(option.id)} />} label={`${option.text || option.label} (${option.vote_count ?? voterCount ?? 0})${votedByMe ? ` — ${t('MessagingPoll.YOU_VOTED')}` : ''}`} />;
+    })}
     {error && <Alert severity="error" role="alert">{error}</Alert>}
     <Stack direction="row" spacing={1}><Button size="small" onClick={vote} disabled={closed || busy}>{t('MessagingPoll.VOTE')}</Button>{canClose && !closed && <Button size="small" color="warning" onClick={close} disabled={busy}>{t('MessagingPoll.CLOSE')}</Button>}{closed && <Typography variant="caption">{t('MessagingPoll.CLOSED')}</Typography>}</Stack>
   </Stack></Paper>;

package/src/messaging/ReactionBar.jsx

@@ -5,7 +5,7 @@ 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 }) {

package/src/messaging/ReadTicks.jsx

@@ -1,4 +1,4 @@
-import { Tooltip, Typography } from '@mui/material';
+import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,6 +9,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) setStatus(next); }).catch(() => { if (mounted) setStatus(null); });
@@ -18,6 +19,7 @@ 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?.kind === 'direct' ? null : status.recipient_detail;
-  const detailText = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean).join(', ');
-  return <Tooltip title={detailText || label}><Typography component="span" variant="caption" color="text.secondary" aria-label={label}>{label}</Typography></Tooltip>;
+  const recipients = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean) || [];
+  if (!recipients.length) return <Typography component="span" variant="caption" color="text.secondary" aria-label={label}>{label}</Typography>;
+  return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ typography: 'caption', color: 'text.secondary', textDecoration: 'underline' }}>{label}</ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
 }

package/src/messaging/Thread.jsx

@@ -1,5 +1,5 @@
 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';
@@ -8,6 +8,7 @@ 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) { return message.reply_to_id ?? 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.
@@ -27,27 +28,57 @@ 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 }) {
   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(() => {
+    if (replyingTo && cache.messages[replyingTo.id]?.deleted_at) {
+      setReplyingTo(null);
+      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);
     try { await loadMoreMessages(conversationId); } catch { setError(t('MessagingThread.LOAD_ERROR')); } finally { setLoadingOlder(false); }
   }, [conversationId, loadMoreMessages, t]);
-  const onScroll = () => { if (scrollRef.current?.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?.scrollTop === 0 && cache.cursors.messages[conversationId] && !loadingOlder) loadOlder();
+  };
   const reply = (message) => { setReplyingTo(message); onReplyTargetChange?.(message); };
+  const jumpToMessage = (messageId) => {
+    const target = [...(scrollRef.current?.querySelectorAll('[data-message-id]') || [])]
+      .find((element) => String(element.dataset.messageId) === String(messageId));
+    target?.scrollIntoView?.({ block: 'center', behavior: 'smooth' });
+  };
   const toggleReplies = async (root) => {
     if (!openThreads[root.id]) {
       try { await loadThreadReplies(root.id); } catch { setError(t('MessagingThread.REPLIES_ERROR')); return; }
+      markThreadRead(root.id).catch(() => {});
     }
     setOpenThreads((current) => ({ ...current, [root.id]: !current[root.id] }));
   };
@@ -59,10 +90,10 @@ export function Thread({ conversationId, onReplyTargetChange }) {
         {cache.cursors.messages[conversationId] && <Box textAlign="center" py={1}><Button onClick={loadOlder} disabled={loadingOlder}>{loadingOlder ? <CircularProgress size={18} /> : t('MessagingThread.LOAD_OLDER')}</Button></Box>}
         {!roots.length && <Typography color="text.secondary" textAlign="center" py={4}>{t('MessagingThread.EMPTY')}</Typography>}
         <Stack spacing={1}>{roots.map((message) => {
-          const replies = chronological(Object.values(cache.messages).filter((item) => item.reply_to === message.id));
-          return <Stack key={message.id} spacing={0.75}><MessageBubble message={message} onReply={reply}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
+          const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
+          return <Stack key={message.id} spacing={0.75}><MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
             {(message.reply_count || replies.length) > 0 && <Button size="small" onClick={() => toggleReplies(message)}>{openThreads[message.id] ? t('MessagingThread.HIDE_REPLIES') : t('MessagingThread.SHOW_REPLIES', { count: message.reply_count || replies.length })}</Button>}
-            {openThreads[message.id] && <Stack spacing={0.75} sx={{ pl: 3, borderLeft: 2, borderColor: 'divider' }}>{replies.map((item) => <MessageBubble key={item.id} message={item} replyTo={message} onReply={reply}>{canShowReadTicks(item, user) && <ReadTicks messageId={item.id} conversation={conversation} />}</MessageBubble>)}</Stack>}
+            {openThreads[message.id] && <Stack spacing={0.75} sx={{ pl: 3, borderLeft: 2, borderColor: 'divider' }}>{replies.map((item) => <MessageBubble key={item.id} message={item} replyTo={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(item, user) && <ReadTicks messageId={item.id} conversation={conversation} />}</MessageBubble>)}</Stack>}
             <Divider /></Stack>;
         })}</Stack>
       </Box>

package/src/messaging/api.js

@@ -7,11 +7,12 @@ function data(response) {
   return response.data;
 }
 
-function requestConfig({ cursor, params, headers } = {}) {
+function requestConfig({ cursor, params, headers, onUploadProgress } = {}) {
   return {
     ...(params ? { params } : {}),
     ...(cursor ? { params: { ...(params || {}), cursor } } : {}),
     ...(headers ? { headers } : {}),
+    ...(onUploadProgress ? { onUploadProgress } : {}),
   };
 }
 
@@ -29,7 +30,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/src/messaging/composerImageCompression.js

@@ -0,0 +1,35 @@
+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) {
+  if (!file?.type?.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);
+    canvas.getContext('2d')?.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 {
+    return file;
+  }
+}

package/tests/ConversationList.test.jsx

@@ -17,7 +17,7 @@ describe('ConversationList', () => {
   let api;
   beforeEach(() => {
     api = {
-      listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, title: 'First', unread_count: 2, last_message: { body: 'Hello' } }], next_cursor: 'opaque-cursor' }),
+      listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, title: 'First', unread_count: 2, last_message: { excerpt: 'Hello' } }], next_cursor: 'opaque-cursor' }),
       getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 2, by_conversation: { 1: 2 } }),
       listMessages: vi.fn().mockResolvedValue({ results: [] }),
       archiveConversation: vi.fn().mockResolvedValue({ id: 1, archived: true }),

package/tests/Thread.test.jsx

@@ -61,7 +61,7 @@ describe('messaging Thread surfaces', () => {
     api.getReadStatus.mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Visible recipient' }] });
     render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'group' }} /></MessagingProvider>);
     const tick = await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
-    fireEvent.mouseOver(tick);
+    fireEvent.click(tick);
     await screen.findByText('Visible recipient');
   });