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

package/src/index.js

@@ -39,10 +39,23 @@ export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCar
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
 
-// --- 6. Translations ---
+// --- 6. Charts ---
+export { ChartFrame } from './components/charts/ChartFrame';
+export { BarChart } from './components/charts/BarChart';
+export { LineChart } from './components/charts/LineChart';
+export { getNeutralChartPalette, useNeutralChartPalette } from './components/charts/palette';
+export {
+  formatPercentage,
+  formatCompact,
+  formatRatio,
+  createChartFormatters,
+  useChartFormatters,
+} from './components/charts/formatters';
+
+// --- 7. Translations ---
 export { authTranslations } from './i18n/authTranslations';
 
-// --- 7. Notifications ---
+// --- 8. Notifications ---
 export { NotificationSettings } from './notifications/NotificationSettings';
 export * from './notifications/api';
 export { NotificationsProvider, useNotifications } from './notifications/NotificationsProvider';
@@ -51,7 +64,21 @@ export { NotificationBell } from './notifications/NotificationBell';
 export { PopupSurface } from './notifications/PopupSurface';
 export { getNotificationFeed, getUnreadCount, markNotifications } from './notifications/feedApi';
 
-// --- 8. Onboarding ---
+// --- 9. Messaging ---
+export * from './messaging/api';
+export { MessagingProvider, useMessaging } from './messaging/MessagingProvider';
+export { ConversationList } from './messaging/ConversationList';
+export { ConversationLaunchers } from './messaging/ConversationLaunchers';
+export { Thread } from './messaging/Thread';
+export { MessageBubble } from './messaging/MessageBubble';
+export { ReadTicks } from './messaging/ReadTicks';
+export { Composer } from './messaging/Composer';
+export { AttachmentList } from './messaging/AttachmentList';
+export { ReactionBar } from './messaging/ReactionBar';
+export { PollCard } from './messaging/PollCard';
+export { MessagingScopeConfig } from './messaging/MessagingScopeConfig';
+
+// --- 9. Onboarding ---
 export * from './onboarding/api';
 export { selectActiveSteps } from './onboarding/stepSelection';
 export {
@@ -66,6 +93,8 @@ export { CompleteNameStep } from './onboarding/steps/CompleteNameStep';
 export { BrowserPushStep } from './onboarding/steps/BrowserPushStep';
 export { PwaInstallStep } from './onboarding/steps/PwaInstallStep';
 
-// --- 9. Translations ---
+// --- 10. Translations ---
 export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
+export { chartsTranslations } from './i18n/chartsTranslations';
+export { messagingTranslations } from './i18n/messagingTranslations';

package/src/messaging/AttachmentList.jsx

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

package/src/messaging/Composer.jsx

@@ -0,0 +1,110 @@
+import { Alert, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
+import PollOutlinedIcon from '@mui/icons-material/PollOutlined';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+
+function newRequestId() { return globalThis.crypto?.randomUUID?.() || `message-${Date.now()}-${Math.random().toString(36).slice(2)}`; }
+
+/**
+ * A provider-backed, independently mountable REST composer.
+ *
+ * `allowAnnouncement` and `linkTarget`: whether announcement composing (jg's
+ * `AnnouncementDialog` — title + body + a deep-link target) is offered here at
+ * all is a host decision (the server enforces who may actually post one; the
+ * client only offers the affordance). `linkTarget`'s VALUE is inherently
+ * app-specific navigation context (jg pre-fills it from the currently open
+ * event-info section) that ucm cannot compute itself, so the host supplies it.
+ */
+export function Composer({ conversationId, replyTarget = null, onReplyTargetChange, allowAnnouncement = false, linkTarget }) {
+  const { t } = useTranslation();
+  const { sendMessage, sendAttachments, createConversationPoll } = useMessaging();
+  const [body, setBody] = useState('');
+  const [files, setFiles] = useState([]);
+  const [error, setError] = useState(null);
+  const [failed, setFailed] = useState(null);
+  const [sending, setSending] = useState(false);
+  const [pollOpen, setPollOpen] = useState(false);
+  const [pollQuestion, setPollQuestion] = useState('');
+  const [pollOptions, setPollOptions] = useState(['', '']);
+  const [allowMultiple, setAllowMultiple] = useState(false);
+  const [announcementOpen, setAnnouncementOpen] = useState(false);
+  const [announcementTitle, setAnnouncementTitle] = useState('');
+  const [announcementBody, setAnnouncementBody] = useState('');
+  const inputRef = useRef(null);
+  const submit = async (requestId = newRequestId(), retry = false) => {
+    if (!body.trim() && !files.length) return;
+    setSending(true); setError(null);
+    const payload = { kind: 'chat', body: body.trim() || undefined, reply_to: replyTarget?.id || undefined, client_request_id: requestId };
+    try {
+      if (files.length) {
+        const formData = new FormData();
+        files.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 })) } });
+      } 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); }
+  };
+  const submitPoll = async () => {
+    const options = pollOptions.map((option) => option.trim()).filter(Boolean);
+    if (!pollQuestion.trim() || options.length < 2) { setError(t('MessagingPoll.CREATE_VALIDATION')); return; }
+    setSending(true); setError(null);
+    try {
+      await createConversationPoll(conversationId, { question: pollQuestion.trim(), options, allow_multiple: allowMultiple }, { clientRequestId: newRequestId() });
+      setPollQuestion(''); setPollOptions(['', '']); setAllowMultiple(false); setPollOpen(false);
+    } catch (pollError) { setError(t('MessagingPoll.CREATE_ERROR', { message: extractApiErrorMessage(pollError) })); } finally { setSending(false); }
+  };
+  const submitAnnouncement = async () => {
+    if (!announcementTitle.trim()) { setError(t('MessagingAnnouncement.VALIDATION')); return; }
+    setSending(true); setError(null);
+    const requestId = newRequestId();
+    try {
+      await sendMessage(conversationId, {
+        kind: 'announcement',
+        title: announcementTitle.trim(),
+        body: announcementBody.trim() || undefined,
+        link_target: linkTarget || undefined,
+        client_request_id: requestId,
+      }, { clientRequestId: requestId });
+      setAnnouncementTitle(''); setAnnouncementBody(''); setAnnouncementOpen(false);
+    } catch (announcementError) { setError(t('MessagingAnnouncement.ERROR', { message: extractApiErrorMessage(announcementError) })); } finally { setSending(false); }
+  };
+  return <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 && <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>
+      {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} />
+      <Button type="submit" variant="contained" disabled={sending || (!body.trim() && !files.length)}>{t('MessagingComposer.SEND')}</Button>
+    </Stack>
+    {failed && <Button type="button" onClick={() => submit(failed.requestId, true)} disabled={sending}>{t('MessagingComposer.RETRY')}</Button>}
+    <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>
+        <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>
+    {allowAnnouncement && <Dialog open={announcementOpen} onClose={() => !sending && setAnnouncementOpen(false)} fullWidth maxWidth="sm">
+      <DialogTitle>{t('MessagingAnnouncement.CREATE')}</DialogTitle><DialogContent><Stack spacing={1} sx={{ pt: 1 }}>
+        <TextField label={t('MessagingAnnouncement.TITLE')} value={announcementTitle} onChange={(event) => setAnnouncementTitle(event.target.value)} autoFocus />
+        <TextField label={t('MessagingAnnouncement.BODY')} value={announcementBody} onChange={(event) => setAnnouncementBody(event.target.value)} multiline minRows={2} />
+      </Stack></DialogContent><DialogActions><Button onClick={() => setAnnouncementOpen(false)}>{t('MessagingAnnouncement.CANCEL')}</Button><Button variant="contained" onClick={submitAnnouncement} disabled={sending}>{t('MessagingAnnouncement.SEND')}</Button></DialogActions>
+    </Dialog>}
+  </Stack>;
+}

package/src/messaging/ConversationLaunchers.jsx

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

package/src/messaging/ConversationList.jsx

@@ -0,0 +1,78 @@
+import { useMemo, useState } from 'react';
+import { Archive, Campaign, Groups, MoreVert, NotificationsOff, Person } from '@mui/icons-material';
+import { Badge, Box, Button, CircularProgress, IconButton, List, ListItemButton, ListItemText, Menu, MenuItem, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import { useMessaging } from './MessagingProvider';
+import { ConversationLaunchers } from './ConversationLaunchers';
+
+function titleOf(conversation, t) { return conversation.title || conversation.other_user?.display_name || conversation.other_user?.username || t('MessagingList.UNTITLED'); }
+function ordered(conversations) {
+  return [...conversations].sort((left, right) => new Date(right.last_message_at || 0) - new Date(left.last_message_at || 0));
+}
+// jg's ConversationList renders a distinct icon per conversation kind so a
+// user can identify type/person at a glance (getConversationAvatar); that
+// glanceable identification is a feature, not layout, so it's reproduced
+// here rather than left as a generic archive-status glyph.
+function KindIcon({ conversation }) {
+  if (conversation.kind === 'broadcast') return <Campaign fontSize="small" />;
+  if (conversation.kind === 'group' || conversation.kind === 'managed' || conversation.kind === 'object_thread') return <Groups fontSize="small" />;
+  return <Person fontSize="small" />;
+}
+
+/** A standalone, provider-backed list; scope picker metadata is supplied as launcher props. */
+export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, autoOpenBroadcast = false, includeArchived = false }) {
+  const { t } = useTranslation();
+  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences } = useMessaging();
+  const [menuConversation, setMenuConversation] = useState(null);
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(null);
+  const conversations = useMemo(() => ordered(Object.values(cache.conversations).filter((item) => includeArchived || !item.archived_at && !item.archived)), [cache.conversations, includeArchived]);
+  const unreadFor = (conversation) => conversation.unread_count ?? cache.unread.by_conversation?.[conversation.id] ?? 0;
+  // Once opened, the broadcast conversation becomes a normal, recency-sorted
+  // row with real unread/preview state — hide the static launcher so it isn't
+  // shown twice (button + list row) with the button's stale, unread-less copy.
+  const broadcastAlreadyOpened = useMemo(() => Object.values(cache.conversations).some((item) => item.kind === 'broadcast'), [cache.conversations]);
+
+  const loadMore = async () => {
+    setLoadingMore(true); setError(null);
+    try { await loadMoreConversations(); } catch { setError(t('MessagingList.LOAD_ERROR')); } finally { setLoadingMore(false); }
+  };
+  const closeMenu = () => { setMenuConversation(null); setMenuAnchor(null); };
+  const archive = async () => {
+    try { await setConversationArchived(menuConversation.id, true); } catch { setError(t('MessagingList.ARCHIVE_ERROR')); }
+    closeMenu();
+  };
+  const toggleMute = async () => {
+    try { await setConversationPreferences(menuConversation.id, { muted: !menuConversation.muted }); } catch { setError(t('MessagingList.PREFERENCES_ERROR')); }
+    closeMenu();
+  };
+
+  return (
+    <Stack spacing={1}>
+      <ConversationLaunchers groupLaunchers={groupLaunchers} broadcastLauncher={broadcastAlreadyOpened ? null : broadcastLauncher} autoOpenBroadcast={autoOpenBroadcast && !broadcastAlreadyOpened} onOpen={onOpen} />
+      {error && <Typography color="error" role="alert">{error}</Typography>}
+      {!conversations.length ? <Box sx={{ py: 3, textAlign: 'center' }}><Typography color="text.secondary">{t('MessagingList.EMPTY')}</Typography></Box> : (
+        <List disablePadding aria-label={t('MessagingList.LABEL')}>
+          {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 }}>
+              <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 }} />
+              <IconButton aria-label={t('MessagingList.ACTIONS')} onClick={(event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }}><MoreVert /></IconButton>
+            </ListItemButton>;
+          })}
+        </List>
+      )}
+      {cache.cursors.conversations && <Button onClick={loadMore} disabled={loadingMore}>{loadingMore ? <CircularProgress size={18} /> : t('MessagingList.LOAD_MORE')}</Button>}
+      <Menu anchorEl={menuAnchor} open={Boolean(menuConversation)} onClose={closeMenu}>
+        <MenuItem onClick={toggleMute}><NotificationsOff fontSize="small" sx={{ mr: 1 }} />{menuConversation?.muted ? t('MessagingList.UNMUTE') : t('MessagingList.MUTE')}</MenuItem>
+        <MenuItem onClick={archive}><Archive fontSize="small" sx={{ mr: 1 }} />{t('MessagingList.ARCHIVE')}</MenuItem>
+      </Menu>
+    </Stack>
+  );
+}

package/src/messaging/MessageBubble.jsx

@@ -0,0 +1,37 @@
+import { Button, Paper, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { AttachmentList } from './AttachmentList';
+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;
+}
+
+/** Provider-backed timeline collaborator; it deliberately has no mutation controls. */
+export function MessageBubble({ message, replyTo, onReply, children }) {
+  const { t } = useTranslation();
+  const deleted = Boolean(message.deleted_at);
+  const attachments = message.attachments || [];
+  return (
+    <Paper component="article" variant="outlined" sx={{ p: 1.25, maxWidth: 'min(100%, 680px)' }} aria-label={t('MessagingThread.MESSAGE')}>
+      <Stack spacing={0.75}>
+        {replyTo && <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>}
+        <Stack direction="row" spacing={1} alignItems="baseline">
+          <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 && <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>}
+        {children}
+      </Stack>
+    </Paper>
+  );
+}