feat!: add text composer and poll composer integration to the message input

[khushal87]

The primary goal of the PR is to introduce the new message composer and the poll composer integration to the React Native SDK. This is a breaking change for the SDK.
The following are the changes that are done to improve the overall flow/add the message composer, and performance in the SDK:

Emoji

• The emoji list used for emoji trigger in auto-complete input suggestions can now be added by the integrator instead of us adding it by default and maintaining the heavy emoji object in the SDK. They can use @emoji-mart to init the data, and the query can be done through the stream-io/react-native-sdk/emoji-middleware exported from the SDK that can be registered on the text composer middleware. An example can be found on the sample app.
• The type of the Emoji is now:

export type Emoji = {
  id: string;
  name: string;
  skins: Array<{ native: string }>;
  emoticons?: Array<string>;
  keywords?: Array<string>;
  native?: string;
};

Suggestions

• The AutoCompleteHeader, item and list components can be a part of the MessageInputContext and removed from the suggestions context.
• All the related suggestion types can now be imported from the stream-chat package instead of being exported by us.
• The onSelectItem from the message input context is not needed. They can easily be implemented by the integrators using the text composer. We can mention it in the guide. Integrators can directly call textComposer.handleSelect function with the exact item they wanna select as a parameter.
• As a result of the new text composer, openCommandsPicker and openMentionsPicker from the message input context are not needed. They can easily be implemented by the integrators using the text composer. We can mention it in the guide. An example is as follows:

 await textComposer.handleChange({
        selection: {
          end: 1,
          start: 1,
        },
        text: '/',
      });

• The ACITriggerSettings are not needed as we use the composer to get the suggestions for each trigger category.
  The suggestion context is no longer needed, as we get the suggestion queries and updates through the message composer.
• The autoCompleteTriggerSettings and emojiSearchIndex are gone as part of the suggestions changes. The latter can be easily added in a custom middleware, and the former's customisation can also be incorporated in the middleware.

Text input changes

• The maxMessageLength, onChangeText, numberOfLines, autoCompleteSuggestionsLimit, closeSuggestions, mentionAllAppUsersEnabled, mentionAllAppUsersQuery, onChange, openSuggestions, triggerSettings, updateSuggestions, text, setGiphyActive, setGiphyEnabled, giphyEnabled props are removed from the AutoCompleteInput component as they can be directly set through the additionalTextInputProps or the message composer simplifies the usage so that you don't have to rely on the context anymore which we previously did. Any custom logic for a query can be done by custom middleware.
• The AutoCompleteInput component now extends React Native's TextInputProps for better customizability. This is 10 times better for the future.
• The giphyActive and the giphyEnabled props are gone now from the context and are replaced with a single config prop isCommandUIEnabled that will control whether we want to show the commands UI, which is different from the default text input on the message input.
• The InputGiphySearch component is now generalised to the CommandInput component, as it handles other commands, which we never supported. To do this, we have a custom middleware in the SDK that does the job of createCommandInjectionMiddleware. Note: The logic might move to the LLC very soon once I get some time and I finalise the release.

• The CommandInput doesn't need the setShowMoreOptions anymore.
• The showMoreOptions and setShowMoreOptions are now not a part of the message input context, because this can pretty much be handled locally in the input button without complicating the state in the context.
• The onChange and appendText from the message input context are not needed anymore, as the integrators can pretty much customise the AutoCompleteInput using the additionalTextInputProps, and the message composer is available to them wherever they need it if they have a channel.

Quoted message

• The quoted message state is now maintained through the message composer, so the channel doesn't need to explicitly maintain its state.
• The clearQuotedMessageState, setQuotedMessage, and quotedMessage gone away from MessageContext and MessageInputContext as it can be set and received from the messageComposer easily.

Send message

• We use messageComposer.compose() to compose the message, and the data returned is used to call the sendMessage in the channel component. This flow will be improved a lot in my next PR involving the attachments manager and handling.

Poll Composer
The poll composer is now fully integrated into the create poll content component to manage the composition of the polls. The changes are as follows:

• The components in the CreatePollContent are now more granular in nature and divided into NameField, MultipleAnswersField, and CreatePollHeader components, each with the previous content but just using the poll composer to manage the state and update the fields.
• The create an option is gone as the LLC auto adds a new option when all others are filled. This is also added to our create poll content. Most SDKs have this.
• The first switch for multiple answers field is removed after discussion as it made 0 sense to have it.
• We use pollComposer.updateFields to update the fields on text changes in text input and on value changes for the switch. The poll options are now more versatile as they respond to the poll ID rather than a numeric index. And after each update, we receive the changes on the onNewOrderSet function, where we update the field on the composer.
• The error handling is also done through the composer now.
• When calling the create and send poll function, we firstly compose the poll using messageComposer.createPoll() and then call sendMessage, where it will automatically have the poll id through the messageComposer.compose() method call.

Apart from the above generic changes, there are a few code cleanups that have happened, which made sense during the integration.

Quick disclaimer about the PR: The changes will make more sense if you club them with the changes in the later PR - #3093
Also, please ignore the tests failing. The tests have to be reworked entirely usingthe message composer and I plan to do it after my changes for the integration is done as it will be easier then.

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
js_bundle_size	466 KB	286 KB	-184525 B	🚀

[isekovanic]

Looks promising as an initial pass, but please have a look at the comments when you have the time. Otherwise, nice !

[isekovanic]

You can merge this into V8 and let's take it from there !