Message Reactions 🥳

[btoms20]

What:

• Adds support for message reactions

Changes:

Models:

• Introduced a Reaction model
  • A Reaction has the same id, user, createdAt and status params that Message has

public struct Reaction: Codable, Identifiable, Hashable {
    public let id: String
    public let user: User
    public let createdAt: Date
    public let type: ReactionType
    public var status: Status
}

• A Reaction contains a ReactionType
  • At the moment the only ReactionType is an emoji, but other types can be added later.

public enum ReactionType: Codable, Equatable, Hashable {
    case emoji(String)
    //case sticker(Image / Giphy / Memoji)
    //case other...
}

• Added a ReactionDelegate
  • Used for responding to Message Reactions and optionally configuring the various reaction views within the Menu

public protocol ReactionDelegate {
   // Required
   func didReact(to message: Message, reaction: DraftReaction)

   // Optional configuration methods
   func shouldShowOverview(for message: Message) -> Bool
   func canReact(to message: Message) -> Bool
   func reactions(for message: Message) -> [ReactionType]?
   func allowEmojiSearch(for message: Message) -> Bool
}

• Updated the Message model to accept an array of Reactions.
• The ChatView initializers have been updated to accept a ReactionDelegate, but default to nil to maintain backward compatibility.

Note

If no ReactionDelegate is provided to the ChatView then all reaction related views are disabled within the MessageMenu

Views

• MessageReaction View
  

  • Supports multiple reactions ordered with most recent on top.
  • When the number of reactions exceed a configurable limit, they're combined in an overflow bubble.
  • Supports in-flight .sending reactions by animating the bubbles stroke
  • Supports failed reactions by coloring the background red (re-delivery / error handling should be left up to the developer)

• ReactionSelection View
  

  • Supports configurable emojis on a per message basis via the ReactionDelegate
  • Supports custom emoji search (launches a keyboard in emoji mode)
  • Shows & Highlights existing Reactions (so developers can support removing reactions if they chose to)

• ReactionOverview View
  

  • Links Users avatars by reactions for an easy overview
  • Shows all reactions, useful when an overflow bubble is rendered on the message bubble
  • Can be enabled / disable via the ReactionDelegate

• New MessageMenu view that doesn't rely on swift-introspection

  • The Menu Buttons automatically get rendered in a ScrollView when there are more buttons then the configured max height allows
  • When the entire layout exceeds the available screen real estate, the entire MessageMenu is rendered in a ScrollView
  • Configurable animation duration (a single ChatView modifier that allows the developer to control how snappy the Menu feels)
    • func messageMenuAnimationDuration(_ duration:Double) -> ChatView

Message Menu - Light	MessageMenu - Dark

Reaction Selection	Emoji Search

Configuring:

The following configuration using the ChatView modifier....

ChatView(...)
.onMessageReaction(
    didReactTo: { message, draftReaction in
        viewModel.add(draftReaction: draftReaction, to: draftReaction.messageID)
    },
    // Prevents the user from being able to react to their own messages
    canReactTo: { !$0.user.isCurrentUser },
    // Limit the available reactions to just thumbs up / down
    availableReactionsFor: { _ in [.emoji("👍"), .emoji("👎")] },
    // Prevent the user from searching for / using custom emojis
    allowEmojiSearchFor: { _ in false }
)

Results in the following message menu layouts...

Custom Emoji Set	No Reaction Selection Available

The developer can also set a ReactionDelegate on the ChatView using either the initializers or the .messageReactionDelegate(...) method.

Supporting Reactions

• This PR doesn't provide any sort of validation on user input. It doesn't enforce that the String passed to .emoji is in fact an emoji.
• The developer should perform adequate user input validation.
• The developer should also handle aspects such as
  • Duplicate reactions
  • Removing reactions
  • Resending reactions that failed to deliver

Custom Message Builder:

• This PR doesn't offer a complete solution to those using the custom message builder.
• The message menu reaction views will still appear above your message cell, but the reaction won't animate to the corner of the message like it does for the default message view.
• Developers using custom messages will have to roll their own reaction views that work for their messages. But copy & pasting the default views should provide a nice launching off point to get started.
• Also, I'm open to discuss ideas on how to make this more compatible with custom message builders.

Fixes / Addresses:

#120
#129

Examples:

• I've updated the ChatExampleView, MockChatInteractor and MockChatData to generate random messages with Reactions and to support reacting to existing messages.

Testing:

• I've tested the layout mechanics extensively on various iPhone and iPad simulators across the full range of Dynamic Text Sizes (including accessibility sizes). The views should adapt appropriately, preserve their appearance and most importantly maintain functionality across the full spectrum of text sizes.
• Having said all that, I'm sure there will be bugs that I've overlooked!

Dependencies:

• The new MessageMenu doesn't rely on either swift-introspection or FloatingButton packages, so these dependencies can be removed from Package.swift.

Disclosure:

• Feel free to modify this PR or delete it if deemed out of scope.

[btoms20]

While working on this, I noticed that the

UIList(...)
    .transparentNonAnimatingFullScreenCover(...)

modifier doesn't seem to be preventing animations upon launching anymore. This results in a moving background while launching the menu while the keyboard is deployed.

I tried a couple of things to keep the ChatView static during the keyboard dismissal but I didn't have any luck.

I believe this behavior is consistent with the current main branch. I'm not sure when transparentNonAnimatingFullScreenCover stopped working correctly.

[f3dm76]

@btoms20, wow, cool! thank you so much for making the lib better, have a great day!