feat: message composer (#2669)

### 🎯 Goal

Provide a message composition API supported by reactive state layer from
stream-chat. The message composition logic has been moved to
stream-chat. The logic kept in stream-chat-react is related only to the
browser event handling.

Depends on:
- GetStream/stream-chat-js#1495
- GetStream/stream-chat-css#328

### 🛠 Implementation details

The message composition now relies on `MessageComposer `instance. The
instance is available for the channel message list, thread message list
and for editing a specific message. The `MessageComposer` instance
should be accessed via `useMessageComposer` hook, that identifies the
correct context (channel, thread, message).

### 🎨 UI Changes

No changes

BREAKING CHANGE: `Channel` props `dragAndDropWindow` &
`optionalMessageInputProps` have been removed, use
`WithDragAndDropUpload` component instead (#2688)
BREAKING CHANGE: Attachment identity functions moved to stream-chat-js
(e.g. isFileAttachment...)
BREAKING CHANGE: Remove ChatAutoComplete, AutoCompleteTextarea,
DefaultSuggestionList, DefaultSuggestionListItem and introduce
TextareaComposer, SuggestionList, SuggestionListItem
BREAKING CHANGE: Remove defaultScrollToItem function previously used by
SuggestionList
BREAKING CHANGE: Removed DefaultTriggerProvider component
BREAKING CHANGE: Remove from Channel props - acceptedFiles,
enrichURLForPreview, enrichURLForPreviewConfig, maxNumberOfFiles,
multipleUploads, TriggerProvider
BREAKING CHANGE: Removal of acceptedFiles, debounceURLEnrichmentMs,
enrichURLForPreview, findURLFn, multipleUploads, onLinkPreviewDismissed,
quotedMessage from ChannelStateContext
BREAKING CHANGE: Changed signature for functions sendMessage and
editMessage in ChannelActionContext
BREAKING CHANGE: Changed signature for handleSubmit
BREAKING CHANGE: Removed setQuotedMessage from ChannelActionContext
BREAKING CHANGE: Removed types MessageToSend, StreamMessage,
UpdatedMessage in favor of LocalMessage or RenderedMessage
BREAKING CHANGE: Removed Trigger generics from ChannelProps
BREAKING CHANGE: Message input state as well as the API is now kept
within MessageComposer instead of MessageInputContext
BREAKING CHANGE: Renamed useMessageInputState to useMessageInputControls
as it does not handle the composition state anymore
BREAKING CHANGE: Removed from MessageInputProps - disabled,
disableMentions, doFileUploadRequest, doImageUploadRequest,
errorHandler, getDefaultValue, mentionAllAppUsers, mentionQueryParams,
message, noFiles, urlEnrichmentConfig, useMentionsTransliteration,
additionalTextareaProps do not expect default value anymore
BREAKING CHANGE: Changed the signature of MessageInput prop
overrideSubmitHandler
BREAKING CHANGE: Local attachment and link preview types moved to
stream-chat
BREAKING CHANGE: The SuggestionListItem UI components for
TextareaComposer receive tokenizedDisplayName instead of itemNameParts
BREAKING CHANGE: Removed duplicate types SendMessageOptions,
UpdateMessageOptions which should be imported from stream-chat instead
BREAKING CHANGE: Removed type LinkPreviewListProps - LinkPreviewList
does not have any props anymore

---------

Co-authored-by: Anton Arnautov <[email protected]>

Author: MartinCupela

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "src/**/*.{js,ts,tsx,md}": "eslint --max-warnings 0",
+  "src/**/*.{js,ts,tsx,md}": "eslint --max-warnings 0 --no-warn-ignored",
   "**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}": "prettier --list-different",
   "src/i18n/*.json": "yarn run validate-translations"
 }

examples/vite/src/App.tsx

@@ -1,4 +1,11 @@
-import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
+import { useEffect } from 'react';
+import {
+  ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
+  LocalMessage,
+  TextComposerMiddleware,
+} from 'stream-chat';
 import {
   AIStateIndicator,
   Channel,
@@ -8,13 +15,19 @@ import {
   Chat,
   ChatView,
   MessageInput,
-  StreamMessage,
+  SendButtonProps,
   Thread,
   ThreadList,
   useCreateChatClient,
+  useMessageComposer,
   VirtualizedMessageList as MessageList,
   Window,
 } from 'stream-chat-react';
+import { createTextComposerEmojiMiddleware } from 'stream-chat-react/emojis';
+import { init, SearchIndex } from 'emoji-mart';
+import data from '@emoji-mart/data';
+
+init({ data });
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
@@ -40,7 +53,8 @@ const filters: ChannelFilters = {
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
-const isMessageAIGenerated = (message: StreamMessage) => !!message?.ai_generated;
+// @ts-ignore
+const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 
 const App = () => {
   const chatClient = useCreateChatClient({
@@ -49,6 +63,20 @@ const App = () => {
     userData: { id: userId },
   });
 
+  useEffect(() => {
+    if (!chatClient) return;
+
+    chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      composer.textComposer.middlewareExecutor.insert({
+        middleware: [
+          createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware,
+        ],
+        position: { before: 'stream-io/text-composer/mentions-middleware' },
+        unique: true,
+      });
+    });
+  }, [chatClient]);
+
   if (!chatClient) return <>Loading...</>;
 
   return (
@@ -64,12 +92,12 @@ const App = () => {
             showChannelSearch
             additionalChannelSearchProps={{ searchForChannels: true }}
           />
-          <Channel>
+          <Channel emojiSearchIndex={SearchIndex}>
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
               <AIStateIndicator />
-              <MessageInput focus />
+              <MessageInput focus audioRecordingEnabled />
             </Window>
             <Thread virtualized />
           </Channel>