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

package/src/messaging/MessagingProvider.jsx

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

package/src/messaging/MessagingScopeConfig.jsx

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

package/src/messaging/PollCard.jsx

@@ -0,0 +1,36 @@
+import { Alert, Button, Checkbox, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+
+/** Independently mountable live poll view. Server authorization remains authoritative. */
+export function PollCard({ message, canClose: canCloseProp }) {
+  const { t } = useTranslation();
+  const { castPollVote, closeConversationPoll, currentUser } = useMessaging();
+  const poll = message?.poll;
+  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]);
+  if (!poll) return null;
+  const closed = Boolean(poll.closed_at);
+  const creatorId = 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 () => {
+    if (!selected.length) { setError(t('MessagingPoll.SELECT_OPTION')); return; }
+    setBusy(true); setError(null);
+    try { await castPollVote(message.id, poll, selected); } catch (voteError) { setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) })); } finally { setBusy(false); }
+  };
+  const close = async () => {
+    setBusy(true); setError(null);
+    try { await closeConversationPoll(message.id, poll); } catch (closeError) { setError(t('MessagingPoll.CLOSE_ERROR', { message: extractApiErrorMessage(closeError) })); } finally { setBusy(false); }
+  };
+  return <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})`} />)}
+    {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

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

package/src/messaging/ReadTicks.jsx

@@ -0,0 +1,25 @@
+import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMessaging } from './MessagingProvider';
+
+/** Renders only the aggregate receipt unless the server explicitly supplies permitted detail. */
+export function ReadTicks({ messageId, conversation }) {
+  const { t } = useTranslation();
+  const { getMessageReadStatus } = useMessaging();
+  const [status, setStatus] = useState(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    getMessageReadStatus(messageId).then((next) => { if (mounted) setStatus(next); }).catch(() => { if (mounted) setStatus(null); });
+    return () => { mounted = false; };
+  }, [getMessageReadStatus, messageId]);
+  if (!status) return null;
+  const label = status.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: status.delivered_count || 0 });
+  // The server never returns DM detail; enforce the same carve-out defensively.
+  const detail = conversation?.kind === 'direct' ? null : status.recipient_detail;
+  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

@@ -0,0 +1,102 @@
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AuthContext } from '../auth/AuthContext';
+import { MessageBubble } from './MessageBubble';
+import { useMessaging } from './MessagingProvider';
+import { ReadTicks } from './ReadTicks';
+
+function chronological(messages) { return [...messages].sort((left, right) => new Date(left.created_at || 0) - new Date(right.created_at || 0)); }
+function replyToId(message) { 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.
+// Wait for reconciliation (status !== 'pending') before showing read state.
+function canShowReadTicks(message, user) {
+  return Boolean(user?.id) && message.sender?.id === user.id && message.status !== 'pending';
+}
+
+/**
+ * A standalone timeline. Compose/reaction/poll/attachment mutations remain
+ * separate chunk collaborators.
+ *
+ * ReadTicks is only mounted for the current user's own messages (matches
+ * jg's `shouldShowReadTick(msg, isOwn)`): a read receipt tells the sender
+ * whether their own message was seen, not the recipient anything about a
+ * message they're currently reading. Gating here also bounds the number of
+ * `getMessageReadStatus` REST calls a rendered timeline fires — one per own
+ * message shown, not one per message in the conversation.
+ */
+export function Thread({ conversationId, onReplyTargetChange, canModerateMessages = false, onAnnouncementLink }) {
+  const { t } = useTranslation();
+  const { user } = useContext(AuthContext) || {};
+  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 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 = () => {
+    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] }));
+  };
+  return (
+    <Stack spacing={1} sx={{ minWidth: 0 }}>
+      {error && <Alert severity="error" role="alert">{error}</Alert>}
+      {replyingTo && <Alert severity="info" onClose={() => { setReplyingTo(null); onReplyTargetChange?.(null); }}>{t('MessagingThread.REPLYING_TO', { sender: replyingTo.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
+      <Box ref={scrollRef} onScroll={onScroll} sx={{ maxHeight: 560, overflowY: 'auto', px: 0.5 }} aria-label={t('MessagingThread.TIMELINE')}>
+        {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) => 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} 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>
+    </Stack>
+  );
+}