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

package/src/messaging/Composer.jsx

@@ -1,13 +1,18 @@
-import { Alert, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';
+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 { useRef, useState } from 'react';
+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() { return globalThis.crypto?.randomUUID?.() || `message-${Date.now()}-${Math.random().toString(36).slice(2)}`; }
+function isImage(file) { return file.type?.startsWith('image/'); }
 
 /**
  * A provider-backed, independently mountable REST composer.
@@ -34,7 +39,20 @@ export function Composer({ conversationId, replyTarget = null, onReplyTargetChan
   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?.deleted_at) 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);
@@ -42,18 +60,29 @@ export function Composer({ conversationId, replyTarget = null, onReplyTargetChan
     try {
       if (files.length) {
         const formData = new FormData();
-        files.forEach((file) => formData.append('files[]', file));
+        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);
-        await sendAttachments(conversationId, formData, { clientRequestId: requestId, retry, 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 })) } });
+        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);
     } 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); }
+    } finally { setSending(false); setUploadProgress(null); }
+  };
+  const removeFile = (index) => setFiles((current) => current.filter((_, fileIndex) => fileIndex !== index));
+  const insertEmoji = (emoji) => {
+    const input = messageInputRef.current?.querySelector?.('textarea') || messageInputRef.current;
+    const start = input?.selectionStart ?? body.length;
+    const end = input?.selectionEnd ?? start;
+    setBody(`${body.slice(0, start)}${emoji}${body.slice(end)}`); setEmojiAnchor(null);
+    requestAnimationFrame(() => { input?.focus(); input?.setSelectionRange(start + emoji.length, start + emoji.length); });
   };
   const submitPoll = async () => {
     const options = pollOptions.map((option) => option.trim()).filter(Boolean);
@@ -82,21 +111,38 @@ export function Composer({ conversationId, replyTarget = null, onReplyTargetChan
   return <Stack component="form" spacing={1} onSubmit={(event) => { event.preventDefault(); submit(); }} aria-label={t('MessagingComposer.LABEL')}>
     {replyTarget && <Alert severity="info" onClose={() => onReplyTargetChange?.(null)}>{t('MessagingComposer.REPLYING_TO', { sender: replyTarget.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
     {error && <Alert severity="error" role="alert">{error}</Alert>}
+    {files.length > 0 && <Stack direction="row" spacing={0.5} flexWrap="wrap" aria-label={t('MessagingComposer.STAGED_FILES')}>
+      {files.map((file, index) => <Stack key={`${file.name}-${index}`} direction="row" alignItems="center" spacing={0.25} sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 0.25 }}>
+        {previews[index] && <Box component="img" src={previews[index]} alt={file.name} width={36} height={36} sx={{ objectFit: 'cover' }} />}
+        <Typography variant="caption">{file.name}</Typography><IconButton type="button" size="small" aria-label={t('MessagingComposer.REMOVE_ATTACHMENT', { name: file.name })} onClick={() => removeFile(index)}><CloseIcon fontSize="inherit" /></IconButton>
+      </Stack>)}
+    </Stack>}
     {files.length > 0 && <Typography variant="caption">{t('MessagingComposer.FILES_SELECTED', { count: files.length })}</Typography>}
     <Stack direction="row" spacing={1} alignItems="flex-end">
       <input ref={inputRef} hidden type="file" multiple onChange={(event) => setFiles(Array.from(event.target.files || []))} />
       <IconButton type="button" aria-label={t('MessagingComposer.ADD_ATTACHMENT')} onClick={() => inputRef.current?.click()}><AttachFileIcon /></IconButton>
-      <IconButton type="button" aria-label={t('MessagingPoll.CREATE')} onClick={() => setPollOpen(true)}><PollOutlinedIcon /></IconButton>
+      <IconButton type="button" aria-label={t('MessagingComposer.ADD_EMOJI')} onClick={(event) => setEmojiAnchor(event.currentTarget)}><EmojiEmotionsOutlinedIcon /></IconButton>
+      <IconButton type="button" aria-label={t('MessagingPoll.CREATE')} disabled={pollOpen || files.some(isImage)} onClick={() => setPollOpen(true)}><PollOutlinedIcon /></IconButton>
       {allowAnnouncement && <IconButton type="button" aria-label={t('MessagingAnnouncement.CREATE')} onClick={() => setAnnouncementOpen(true)}><CampaignOutlinedIcon /></IconButton>}
-      <TextField fullWidth multiline minRows={2} value={body} onChange={(event) => setBody(event.target.value)} label={t('MessagingComposer.MESSAGE')} disabled={sending} />
+      <TextField inputRef={messageInputRef} fullWidth multiline 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} />
       <Button type="submit" variant="contained" disabled={sending || (!body.trim() && !files.length)}>{t('MessagingComposer.SEND')}</Button>
     </Stack>
+    {sending && files.length > 0 && <Stack spacing={0.5} role="status">
+      <Stack direction="row" spacing={1} alignItems="center">
+        {uploadProgress == null ? <CircularProgress size={16} /> : <CircularProgress size={16} variant="determinate" value={uploadProgress} />}
+        <Typography variant="caption">{t('MessagingComposer.UPLOADING')}</Typography>
+      </Stack>
+      {uploadProgress != null && <LinearProgress variant="determinate" value={uploadProgress} />}
+    </Stack>}
     {failed && <Button type="button" onClick={() => submit(failed.requestId, true)} disabled={sending}>{t('MessagingComposer.RETRY')}</Button>}
+    <Menu anchorEl={emojiAnchor} open={Boolean(emojiAnchor)} onClose={() => setEmojiAnchor(null)}>
+      {QUICK_EMOJIS.map((emoji) => <MenuItem key={emoji} onClick={() => insertEmoji(emoji)}>{emoji}</MenuItem>)}
+    </Menu>
     <Dialog open={pollOpen} onClose={() => !sending && setPollOpen(false)} fullWidth maxWidth="sm">
       <DialogTitle>{t('MessagingPoll.CREATE')}</DialogTitle><DialogContent><Stack spacing={1} sx={{ pt: 1 }}>
         <TextField label={t('MessagingPoll.QUESTION')} value={pollQuestion} onChange={(event) => setPollQuestion(event.target.value)} autoFocus />
         {pollOptions.map((option, index) => <TextField key={index} label={t('MessagingPoll.OPTION', { count: index + 1 })} value={option} onChange={(event) => setPollOptions((current) => current.map((value, optionIndex) => optionIndex === index ? event.target.value : value))} />)}
-        <Button type="button" onClick={() => setPollOptions((current) => [...current, ''])}>{t('MessagingPoll.ADD_OPTION')}</Button>
+        <Button type="button" disabled={pollOptions.length >= 10} onClick={() => setPollOptions((current) => [...current, ''])}>{t('MessagingPoll.ADD_OPTION')}</Button>
         <FormControlLabel control={<Checkbox checked={allowMultiple} onChange={(event) => setAllowMultiple(event.target.checked)} />} label={t('MessagingPoll.ALLOW_MULTIPLE')} />
       </Stack></DialogContent><DialogActions><Button onClick={() => setPollOpen(false)}>{t('MessagingPoll.CANCEL')}</Button><Button variant="contained" onClick={submitPoll} disabled={sending}>{t('MessagingPoll.CREATE')}</Button></DialogActions>
     </Dialog>

package/src/messaging/ConversationList.jsx

@@ -10,6 +10,12 @@ function titleOf(conversation, t) { return conversation.title || conversation.ot
 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
@@ -22,8 +28,8 @@ function KindIcon({ conversation }) {
 
 /** 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 } = useTranslation();
-  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences } = useMessaging();
+  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);
@@ -58,11 +64,11 @@ export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, au
           {conversations.map((conversation) => {
             const unread = unreadFor(conversation);
             const archived = Boolean(conversation.archived || conversation.archived_at);
-            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => onOpen?.(conversation)} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
+            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => { markConversationRead(conversation.id).catch(() => {}); onOpen?.(conversation); }} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
               <Badge color="error" badgeContent={unread || null} max={99} sx={{ mr: 2 }}>
                 {archived ? <Archive fontSize="small" color="disabled" /> : <KindIcon conversation={conversation} />}
               </Badge>
-              <ListItemText primary={titleOf(conversation, t)} secondary={conversation.last_message?.body || t('MessagingList.NO_MESSAGES')} primaryTypographyProps={{ fontWeight: unread ? 700 : 400, noWrap: true }} secondaryTypographyProps={{ noWrap: true }} />
+              <ListItemText primary={<Stack direction="row" spacing={1} justifyContent="space-between"><Typography component="span" fontWeight={unread ? 700 : 400} noWrap>{titleOf(conversation, t)}</Typography>{relativeTime(conversation.last_message_at, i18n?.language) && <Typography component="span" variant="caption" color="text.secondary" noWrap>{relativeTime(conversation.last_message_at, i18n?.language)}</Typography>}</Stack>} secondary={conversation.last_message?.body || t('MessagingList.NO_MESSAGES')} secondaryTypographyProps={{ noWrap: true }} />
               <IconButton aria-label={t('MessagingList.ACTIONS')} onClick={(event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }}><MoreVert /></IconButton>
             </ListItemButton>;
           })}

package/src/messaging/DirectMessageLauncher.jsx

@@ -0,0 +1,96 @@
+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({
+        target_user_id: selectedId,
+        ...(scope == null ? {} : { scope }),
+      });
+      setOpen(false);
+      onOpen?.(conversation);
+    } catch (requestError) {
+      setError(extractApiErrorMessage(requestError) || t('MessagingDirect.START_ERROR'));
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  return (
+    <>
+      <Button variant="outlined" onClick={showPicker}>{t('MessagingDirect.LAUNCH')}</Button>
+      <Dialog open={open} onClose={closePicker} fullScreen={fullScreen} aria-labelledby={titleId}>
+        <DialogTitle id={titleId}>{t('MessagingDirect.TITLE')}</DialogTitle>
+        <DialogContent>
+          {error && <Alert severity="error" sx={{ mb: 1 }}>{error}</Alert>}
+          {starting && <Typography role="status" sx={{ mb: 1 }}><CircularProgress size={16} sx={{ mr: 1 }} />{t('MessagingDirect.STARTING')}</Typography>}
+          {candidates.length === 0 ? (
+            <Typography>{t('MessagingDirect.EMPTY')}</Typography>
+          ) : (
+            <List aria-label={t('MessagingDirect.CANDIDATES')}>
+              {candidates.map((candidate) => (
+                <ListItemButton
+                  key={candidate.id}
+                  selected={candidate.id === selectedId}
+                  disabled={starting}
+                  onClick={() => setSelectedId(candidate.id)}
+                >
+                  <ListItemText primary={candidate.display_name || candidate.name || candidate.label || candidate.id} />
+                </ListItemButton>
+              ))}
+            </List>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closePicker} disabled={starting}>{t('MessagingDirect.CANCEL')}</Button>
+          <Button variant="contained" onClick={start} disabled={selectedId == null || starting}>
+            {t('MessagingDirect.START')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

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,17 +103,43 @@ 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') return { ...state, messages: mergeById(state.messages, payload) };
   if (frame.type === 'reaction') {
@@ -191,6 +224,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 +238,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 +269,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 +279,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 +288,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 || [];
@@ -296,7 +363,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 +373,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/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></>;
 }