feat(chat): add message retry option for failed deliveries

Author: mremond

CHANGELOG.md

@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Font size setting in appearance preferences
 - PEP-based conversation list synchronisation (ConversationSync module)
 - XEP-0202: Entity Time — display contact local time in chat header and contact popover
+- Display message delivery errors, and offer the options to retry sending the mesage
 
 ### Changed
 

RELEASE_NOTES.md

@@ -21,6 +21,7 @@
 - Font size setting in appearance preferences
 - PEP-based conversation list synchronisation (ConversationSync module)
 - XEP-0202: Entity Time — display contact local time in chat header and contact popover
+- Display message delivery errors, and offer the options to retry sending the mesage
 
 ### Changed
 

apps/fluux/src-tauri/tauri.conf.json

@@ -62,7 +62,7 @@
     ],
     "macOS": {
       "minimumSystemVersion": "10.13",
-      "bundleVersion": "b476c49",
+      "bundleVersion": "83a0c04",
       "entitlements": "Entitlements.plist",
       "signingIdentity": null
     },

apps/fluux/src/components/ChatView.tsx

@@ -26,7 +26,7 @@ export function ChatView({ onBack, onSwitchToMessages, mainContentRef, composerR
   const { t } = useTranslation()
   // Use useChatActive instead of useChat to avoid subscribing to the conversation list.
   // This prevents re-renders during background MAM sync of other conversations.
-  const { activeConversation, activeMessages, activeTypingUsers, sendReaction, sendCorrection, retractMessage, activeAnimation, sendEasterEgg, clearAnimation, clearFirstNewMessageId, updateLastSeenMessageId, activeMAMState, fetchOlderHistory } = useChatActive()
+  const { activeConversation, activeMessages, activeTypingUsers, sendReaction, sendCorrection, retractMessage, retryMessage, activeAnimation, sendEasterEgg, clearAnimation, clearFirstNewMessageId, updateLastSeenMessageId, activeMAMState, fetchOlderHistory } = useChatActive()
   // Use useContactIdentities instead of useRoster() to avoid re-renders on
   // presence changes. ChatView only needs contact names and avatars for display.
   const contactsByJid = useContactIdentities()
@@ -275,6 +275,7 @@ export function ChatView({ onBack, onSwitchToMessages, mainContentRef, composerR
           activeReactionPickerMessageId={activeReactionPickerMessageId}
           onReactionPickerChange={handleReactionPickerChange}
           retractMessage={retractMessage}
+          retryMessage={retryMessage}
           selectedMessageId={selectedMessageId}
           hasKeyboardSelection={hasKeyboardSelection}
           showToolbarForSelection={showToolbarForSelection}
@@ -349,6 +350,7 @@ const ChatMessageList = memo(function ChatMessageList({
   activeReactionPickerMessageId,
   onReactionPickerChange,
   retractMessage,
+  retryMessage,
   selectedMessageId,
   hasKeyboardSelection,
   showToolbarForSelection,
@@ -381,6 +383,7 @@ const ChatMessageList = memo(function ChatMessageList({
   activeReactionPickerMessageId: string | null
   onReactionPickerChange: (messageId: string, isOpen: boolean) => void
   retractMessage: (conversationId: string, messageId: string) => Promise<void>
+  retryMessage: (conversationId: string, messageId: string) => Promise<void>
   selectedMessageId: string | null
   hasKeyboardSelection: boolean
   showToolbarForSelection: boolean
@@ -467,6 +470,7 @@ const ChatMessageList = memo(function ChatMessageList({
       hideToolbar={isComposing || (activeReactionPickerMessageId !== null && activeReactionPickerMessageId !== msg.id)}
       onReactionPickerChange={(isOpen) => onReactionPickerChange(msg.id, isOpen)}
       retractMessage={retractMessage}
+      retryMessage={retryMessage}
       isSelected={msg.id === selectedMessageId}
       hasKeyboardSelection={hasKeyboardSelection}
       showToolbarForSelection={showToolbarForSelection}
@@ -481,7 +485,7 @@ const ChatMessageList = memo(function ChatMessageList({
   ), [
     ownAvatar, contactsByJid, ownNickname, conversationId, conversationType,
     sendReaction, myBareJid, messagesById, onReply, onEdit, lastOutgoingMessageId, lastMessageId,
-    isComposing, activeReactionPickerMessageId, onReactionPickerChange, retractMessage,
+    isComposing, activeReactionPickerMessageId, onReactionPickerChange, retractMessage, retryMessage,
     selectedMessageId, hasKeyboardSelection, showToolbarForSelection, isDarkMode,
     hoveredMessageId, handleMessageHover, handleMessageLeave, formatTime, effectiveTimeFormat
   ])
@@ -533,6 +537,7 @@ interface ChatMessageBubbleProps {
   hideToolbar?: boolean
   onReactionPickerChange?: (isOpen: boolean) => void
   retractMessage: (conversationId: string, messageId: string) => Promise<void>
+  retryMessage: (conversationId: string, messageId: string) => Promise<void>
   isSelected?: boolean
   hasKeyboardSelection?: boolean
   showToolbarForSelection?: boolean
@@ -567,6 +572,7 @@ const ChatMessageBubble = memo(function ChatMessageBubble({
   hideToolbar,
   onReactionPickerChange,
   retractMessage,
+  retryMessage,
   isSelected,
   hasKeyboardSelection,
   showToolbarForSelection,
@@ -690,6 +696,7 @@ const ChatMessageBubble = memo(function ChatMessageBubble({
       onReply={() => onReply(message)}
       onEdit={() => onEdit(message)}
       onDelete={async () => retractMessage(conversationId, message.id)}
+      onRetry={message.deliveryError ? () => { void retryMessage(conversationId, message.id) } : undefined}
       onMediaLoad={onMediaLoad}
       replyContext={replyContext}
       onReactionPickerChange={onReactionPickerChange}

apps/fluux/src/components/conversation/MessageBubble.tsx

@@ -5,8 +5,9 @@
  * the common bubble structure.
  */
 import { useState, memo, type ReactNode } from 'react'
-import { CornerUpRight } from 'lucide-react'
-import { formatMessagePreview, type BaseMessage, type MentionReference, type Contact, type ContactIdentity, type RoomRole, type RoomAffiliation } from '@fluux/sdk'
+import { useTranslation } from 'react-i18next'
+import { CornerUpRight, AlertCircle, RefreshCw } from 'lucide-react'
+import { formatMessagePreview, formatXMPPError, type BaseMessage, type MentionReference, type Contact, type ContactIdentity, type RoomRole, type RoomAffiliation } from '@fluux/sdk'
 import { Avatar } from '../Avatar'
 import { AvatarLightbox } from '../AvatarLightbox'
 import { MessageToolbar } from './MessageToolbar'
@@ -68,6 +69,7 @@ export interface MessageBubbleProps {
   onReply: () => void
   onEdit: () => void
   onDelete: () => Promise<void>
+  onRetry?: () => void
   onMediaLoad?: () => void
 
   // Reply context (view-specific rendering)
@@ -112,6 +114,7 @@ function arePropsEqual(prev: MessageBubbleProps, next: MessageBubbleProps): bool
   if (prev.message.isEdited !== next.message.isEdited) return false
   if (prev.message.isRetracted !== next.message.isRetracted) return false
   if (prev.message.isOutgoing !== next.message.isOutgoing) return false
+  if (prev.message.deliveryError !== next.message.deliveryError) return false
 
   // Reactions - compare stringified since object reference will differ
   const prevReactions = JSON.stringify(prev.message.reactions ?? {})
@@ -207,6 +210,7 @@ export const MessageBubble = memo(function MessageBubble({
   onReply,
   onEdit,
   onDelete,
+  onRetry,
   onMediaLoad,
   replyContext,
   mentions,
@@ -218,9 +222,11 @@ export const MessageBubble = memo(function MessageBubble({
   formatTime,
   timeFormat,
 }: MessageBubbleProps) {
+  const { t } = useTranslation()
   const [showReactionPicker, setShowReactionPickerState] = useState(false)
   const [showMoreMenu, setShowMoreMenu] = useState(false)
   const [showAvatarLightbox, setShowAvatarLightbox] = useState(false)
+  const [showErrorDetails, setShowErrorDetails] = useState(false)
 
   // Whether reactions are enabled for this message (room has stable occupant identity)
   const reactionsEnabled = onReaction !== undefined
@@ -390,6 +396,40 @@ export const MessageBubble = memo(function MessageBubble({
           getReactorName={getReactorName}
           isRetracted={message.isRetracted}
         />
+
+        {/* Delivery error indicator */}
+        {message.deliveryError && (
+          <div className="flex flex-col gap-1 pt-1">
+            <div className="flex items-center gap-1.5 text-red-500">
+              <AlertCircle className="w-3.5 h-3.5 flex-shrink-0" />
+              <span className="text-xs font-medium">{t('chat.deliveryFailed')}</span>
+              <span className="text-xs text-fluux-muted">—</span>
+              <button
+                onClick={() => setShowErrorDetails(!showErrorDetails)}
+                className="text-xs text-fluux-muted hover:text-fluux-text cursor-pointer underline"
+              >
+                {t('chat.viewError')}
+              </button>
+              {onRetry && (
+                <>
+                  <span className="text-xs text-fluux-muted">·</span>
+                  <button
+                    onClick={onRetry}
+                    className="text-xs text-fluux-link hover:text-fluux-link-hover cursor-pointer underline flex items-center gap-1"
+                  >
+                    <RefreshCw className="w-3 h-3" />
+                    {t('chat.retry')}
+                  </button>
+                </>
+              )}
+            </div>
+            {showErrorDetails && (
+              <div className="text-xs text-fluux-muted pl-5 py-1 bg-red-500/5 rounded">
+                {t('chat.errorDetails', { error: formatXMPPError(message.deliveryError) })}
+              </div>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Avatar lightbox overlay */}

apps/fluux/src/data/changelog.ts

@@ -39,6 +39,7 @@ export const changelog: ChangelogEntry[] = [
           'Font size setting in appearance preferences',
           'PEP-based conversation list synchronisation (ConversationSync module)',
           'XEP-0202: Entity Time — display contact local time in chat header and contact popover',
+          'Display message delivery errors, and offer the options to retry sending the mesage',
         ],
       },
       {

apps/fluux/src/i18n/locales/be.json

@@ -404,7 +404,11 @@
             "many": "{{name1}}, {{name2}} і яшчэ {{count}} друкуюць..."
         },
         "showMore": "Паказаць больш",
-        "showLess": "Паказаць менш"
+        "showLess": "Паказаць менш",
+        "deliveryFailed": "Message not delivered",
+        "viewError": "View error",
+        "retry": "Retry",
+        "errorDetails": "Error: {{error}}"
     },
     "dates": {
         "today": "Сёння",

apps/fluux/src/i18n/locales/bg.json

@@ -404,7 +404,11 @@
             "many": "{{name1}}, {{name2}} и още {{count}} пишат..."
         },
         "showMore": "Покажи повече",
-        "showLess": "Покажи по-малко"
+        "showLess": "Покажи по-малко",
+        "deliveryFailed": "Message not delivered",
+        "viewError": "View error",
+        "retry": "Retry",
+        "errorDetails": "Error: {{error}}"
     },
     "dates": {
         "today": "Днес",

apps/fluux/src/i18n/locales/ca.json

@@ -404,7 +404,11 @@
             "many": "{{name1}}, {{name2}} i {{count}} més estan escrivint..."
         },
         "showMore": "Mostra més",
-        "showLess": "Mostra menys"
+        "showLess": "Mostra menys",
+        "deliveryFailed": "Message not delivered",
+        "viewError": "View error",
+        "retry": "Retry",
+        "errorDetails": "Error: {{error}}"
     },
     "dates": {
         "today": "Avui",

apps/fluux/src/i18n/locales/cs.json

@@ -404,7 +404,11 @@
             "many": "{{name1}}, {{name2}} a {{count}} dalších píše..."
         },
         "showMore": "Zobrazit více",
-        "showLess": "Zobrazit méně"
+        "showLess": "Zobrazit méně",
+        "deliveryFailed": "Message not delivered",
+        "viewError": "View error",
+        "retry": "Retry",
+        "errorDetails": "Error: {{error}}"
     },
     "dates": {
         "today": "Dnes",